Skip to main content
chespio
Inspiring
April 20, 2023
Question

HTML5 Canvas laggy on Chrome Android

  • April 20, 2023
  • 1 reply
  • 542 views

Hello everyone, 

It's been a little over a week since I've been trying to solve an issue that keeps me awake at night.

It's about a project I'm working on that runs very slowly only on Chrome for Android. After much research, I found that the problem occurs when handling several large images (around 3500 pixels each).
I've confirm this by compressing big spritesheets images to 100kb each and still laggy if the images are biger in pixel size.  

The issue is that if I don't use spritesheets, the loading time increases considerably, taking almost a minute to load, compared to 5 seconds of loading time when using two giant spritesheets. However, on Android, the performance drops significantly. On the other hand, if I load the 72 separate images, the loading time increases to a minute, but the performance is excellent.

Could you share some experiences and/or suggestions on other methods to approach my problem? Or options to investigate?


Thank you for reading this,

Great performance but about 60 seconds to load: 
https://wprotate.netlify.app 

5 seconds to load, but laggy on Chrome Android 
https://rx-test2.netlify.app  

    This topic has been closed for replies.

    1 reply

    kglad
    Community Expert
    Community Expert
    April 20, 2023

    there's a trade-off between available host system resources and the demands of what you create.  ie, you can't super-computer performance on a mobile.

     

    that said, a 60x60 image is not demanding and should cause no problem on a mobile.

    chespio
    chespioAuthor
    Inspiring
    April 24, 2023

    Thank you kglad for your response!
    I understand the trade-off between system resources and the demands of a project. However, I'm curious about your mention of a 60x60 image. Are you referring to an image with a resolution of 60x60 pixels?

    Thanks in advance 

    kglad
    Community Expert
    Community Expert
    April 24, 2023

    i'm referring to an image with a size of 60px by 60px or a 3600px image, which you indicated was a large image.