Canvas dimensions grow with higher screen density? -> Error

[tobiass45799868]

I have noticed that my Animate Canvas animation with dimensions of 1600 x 1600 pixels is no longer displayed on the latest iPhones.

While evaluating the problem I got (only via iPhone14) the following error message in createjs.min.js:

Canvas area exceeds the maximum limit (width * height > 16777216).

At first this surprised me, because a 1600 x 1600 results in only 2,560,000 px, about one sixth. However, I found out that at screen density 2 the canvas actually measures 3200 x 3200 px, at density 3 even 4800 x 4800 px, which then exceeds this value of 16,777,216 px.

I also read that this 16,777,216 px seems to be the limit for iOs Safari for quite some time (https://pqina.nl/blog/canvas-area-exceeds-the-maximum-limit/).

In fact, this leads to the completely absurd effect that the more powerful and modern a device is (higher density), the smaller the Adobe Animate canvas has to be to still be displayed.

In fact: if I halve the canvas in Adobe Animate to 800 x 800 pixels, it still displays on my iPhone 14, of course (blown up to 200%) much blurrier. 1600 x 1600 pixels only runs on my much older iPad with Screen Density 2.

This is so absurd that I can't imagine there is no solution here??? How do I get a 1600 x 1600 px canvas to work on my iPhone 14 without this Error in createjs.min.js?

Thank you!

Stoschka

[kglad]

@tobiass45799868 

what did you do to see the error message?

[tobiass45799868]

First I did a general search for bugs in the browser developer tools - no hints. Then I connected the iPhone14 via cable to the laptop and searched directly on the contentless white iOS Safari page. A warning triangle and said error message popped up there:

Canvas area exceeds the maximum limit (width * height > 16777216)

createjs.min.js (1929:28)

This irritated me because of the limit I thought I had not exceeded. So I added an alert with canvas.height and canvas.width at the end of the handleComplete function and tested it in different devices. So I found out that the canvas dimensions were not 1600 x 1600, but 3200 x 3200 (laptop) or 4800 x 4800 (iPhone14) depending on the device.

[kglad]

thanks for that info.  i see the same error.

what's triggering the resizing?

[joejoe_jack · Accepted solution]

Yes, Animate's Canvas export uses the devicePixelRatio to calculate canvas size when exporting with the Make Responsive option enabled. One of the things you can do is to set devicePixelRatio back to 1.0 Add this code to the Global Scripts so it is set before initialization.

window.devicePixelRatio = 1;

This may work for most siutations. You can also overwrite the makeResponsive method as well.

[Mc-M]

I had the same error, but this works for me , thanks!

window.devicePixelRatio = 1;