Issue on resize canvas, and then generate data url

[MatBdry]

Hello,

I have an issue when I resize the canvas and then call toDataURL on iPhone and iPad.

I saw that when we call setWith() and setHeight(), fabric call the function setDimensions(), which call _initRetinaDisplay() function to apply a pixel ratio on the canvas (x2 on iOS).

Then, when I call toDataURL, fabric call again the function _initRetinaDisplay(), so the width and height are mutiplied twice (x4 in total). So, I have an error message in the console: "Canvas area exceeds the maximum limit (width * height > 16777216).

[neopheus]

jsfiddle that demonstrate the problem.

[MatBdry]

http://jsfiddle.net/qp8x7a5w/17/ here is an example of my case. On iPad, if you select an image, you will see in the console the message "Canvas area exceeds the maximum limit (width * height > 16777216)" when I call the toDataURL function.

[asturur]

each call to setDimensions, or generally changing dimension of the canvas, will kill the context and so the transformation associated with it. For that reason initRetinaScaling is called each time.
I think that if you call setDimensions instead of setWidth and setHeight you will have the same problem.

Is not that the ipad has higher than 2 devicepixel ratio or the browser you use has some inner logic to handle retina? create the canvas without retina, try to export the image and see how bit it is, if from 1200x1200 you get 2400x2400 ipad has automatic retina stuff.

http://jsfiddle.net/qp8x7a5w/27/

[MatBdry]

I don't have the problem on none retina display. The iPad has a devicepixel ration equal to 2. But _initRetinaScaling is called where we call setHeight, setWidth and toDataURL, so 3 times. May be it's too much ? I checked others issues, and I found this one #2554. May be there is a side effect with the toDataURL ?

[asturur]

when you resize the canvas retina scaling dies. that is why we reapply it.
When you toDataUrl you do on a new canvas element that has to be retina scaled also.
This issue does not happen on my macbook retina screen. That means that IPAD is doing something more, either via OS or browser.

[MatBdry]

Ok, I made an analyse of what happened when there is a toDataURL because I didn't know what was done. At the beginning, width and height are equal to 1200, so that's good. Then, toDataURL call toDataURLWithMultiplier because we are on retina scaling and so multiplier is equal to 2. But then, toDataURLWithMultiplier call setDimensions with scaledHeight and scaledWidth equal to 2400, so the _initRetinaScaling is called after the width and height are replaced by the scaledWidth and scaledHeight, so it re-apply this.width * devicePixelRatio and this.height * devicePixelRatio, and so we have 2400 * 2 = 4800.

[asturur]

strange i thought that during toDataURL for this purpouse enableRetina was set to false. i ll check.

[asturur]

still does not apply on my macbook i repeat.

[MatBdry]

I don't see enableRetinaScaling set to false when toDataURL is called. May be your MacBook has a better limit for the canvas size (> 16777216).

I use iOS 9.3.4 on my iPad, and iOS 9.3 Safari on devices is limited to an area of 16777216 pixels (for example, 4096 x 4096). I suspect this is a common number across newer iOS devices

[asturur]

i get a 2400x2400 image that is the point. i do not get 4800x4800 that is why i m sceptical.

[MatBdry]

mmmmmh very weird... And if you debug the callstack, you have 1200x1200 in the _initRetinaScaling after the call of toDataURLWithMultiplier ??

But that is the point, the image adding works great, so I also have a 2400x2400 image in my canvas. It's only when I call the toDataURL that the problem appears.

[asturur]

as soon as i have a bit of time i check it.

[MatBdry]

Ok ! If you want me to test some things, tell me !

[MatBdry]

Any news about this problem ? :)

[MatBdry]

I made some test about this issue because I have to solve that problem quickly. It seems that if I apply toDataURL directly on the image, it works better.

http://jsfiddle.net/qp8x7a5w/40/

[asturur]

ok bug!
gonna resolve it later.