• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

HTML5 Canvas laggy on Chrome Android

Explorer ,
Apr 20, 2023 Apr 20, 2023

Copy link to clipboard

Copied

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  

Views

311

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 20, 2023 Apr 20, 2023

Copy link to clipboard

Copied

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.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Apr 24, 2023 Apr 24, 2023

Copy link to clipboard

Copied

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 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Apr 24, 2023 Apr 24, 2023

Copy link to clipboard

Copied

LATEST

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines