CODEWITHSUNDEEP
fabricjs
JoeManFoo
JoeManFoo

Reputation: 359

fabricjs call to canvas.toDataURL() resizes the dimensions of the canvas

I'm using fabricjs 1.7.17 and have seen this issue below on IE Edge, Chrome and Firefox.

where the canvas is being set with a width and height in HTML of 768px.

Within my fabricjs canvas init I've got:

editor.canvas = new fabric.Canvas('editor')
editor.canvas.setDimensions({
  width: 1080,
  height: 1080,
  allowTouchScrolling: false,
  backgroundColor: 'rgba(55, 55, 55, .33)',
  rotationCursor: 'url(/static/img/rotate.cur) 10 10, crosshair'
}, {backstoreOnly: true})

The problem is when you call the editor.canvas.toDataURL() method the size of the goes from 768px to 1080px

If you call the browser's native canvas.toDataURL() method there isn't a jump in size.

Anyone bump into this and have a possible fix?

Here's a simplified jsfiddle: https://jsfiddle.net/m8dhmbtu/23/

Click on the "Native Canvas.toDataURL()" and you'll get the results to console.log and there will be no change to the displayed canvas in the preview window.

Click on the "Fabricjs canvas.toDataURL()" and you'll also get the results (the same) to console.log however; you'll also get a jump in the size of the in the preview window...this is what I'm trying to prevent.

Upvotes: 2

Views: 1596

Answers (1)

AndreaBogazzi
AndreaBogazzi

Reputation: 14731

I think the problem is actually a bug. You set the canvas to 1080 for backstore dimension only, meaning that the canvas will be sized but the css will be left untouched.

A dataurl will reset the canvas after the process to fix it back in case the export to data url had a multiplier.

while this can be fixed at least for the non multiplied situations, a proper fix is needed.

The proper fix consist in setting backstore only during export so that the css does not get touched.

A better fix would be to do not touch the original canvas and create one on the fly just for exporting.

please go on official fabricjs repository and open an issue for this.

Upvotes: 3

Related Questions