Skip to main content
tobiass45799868
tobiass45799868
Participant
March 20, 2023
Answered

Canvas dimensions grow with higher screen density? -> Error

  • March 20, 2023
  • 2 replies
  • 1574 views

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

This topic has been closed for replies.
Correct answer joejoe_jack

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.

 

2 replies

J
joejoe_jackCorrect answer
Inspiring
March 21, 2023

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.

 

    M
    Mc-M
    Participant
    April 10, 2024

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

    window.devicePixelRatio = 1;

     

    kglad
    Community Expert
    kgladCommunity Expert
    Community Expert
    March 20, 2023

    @tobiass45799868 

     

    what did you do to see the error message?

    tobiass45799868
    tobiass45799868Author
    Participant
    March 20, 2023

    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
    Community Expert
    kgladCommunity Expert
    Community Expert
    March 20, 2023

    thanks for that info.  i see the same error.

     

    what's triggering the resizing?

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices