Is there a practical limit to the number of HTML5 canvas elements you can have on one page?
For example, is 500 individual canvases feasible for a modern browser on the average computer?
Share
Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.
Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.
Lost your password? Please enter your email address. You will receive a link and will create a new password via email.
Please briefly explain why you feel this question should be reported.
Please briefly explain why you feel this answer should be reported.
Please briefly explain why you feel this user should be reported.
Is there a practical limit to the number of HTML5 canvas elements you can have on one page?
For example, is 500 individual canvases feasible for a modern browser on the average computer?
Each canvas consumes memory at least, not less than an image of the same size.
How big are those canvas, anyway?
Having 500 different images on the same page could slow down the PC, and if those images are scaled down via CSS (so you have additional CPU usage), the slowness is overwhelming (I already tested it).
quick test done:
Ive created 500 512×512 canvases, and the Windows memory usage was about 40MB. Not so much, really.
Now I should draw in each one via JS, maybe using them allocates much more memory.
-edit-
500 canvases, 512×512, in each one is drawn a triangle: http://jsfiddle.net/3U4hG/1/
Consumes about 0.5GB, about 1MB for each canvas, and considering that 512x512x4 (4 bytes per pixel) is 1MB, the memory usage can be easily determined.