HTML5 multiple canvas on a single page.

Question

If we use multiple on a single html page does it hamper the performance of the application that is being developed and does the code get very bulky and require more time to load the page?

Answer 1

I've used dozens of canvases on the same page display different graphs using a javascript graphing library. The graphs are quite fast, it's gathering the data for them that's a bit slow in our case.

If you want you can wait to do all your drawing until the rest of the page loads by kicking it off from the onLoad function.

Answer 2

A single instance runs smooth,more does not effect rendering on page.Data is the factor of slowing canvas down.In order to increase page loading time,you can simply call canvas rendering methods after page loading.

Best Regards
Myra

Answer 3

Oftentimes multiple canvases results in better performance.

Say you are making a program that has items on the screen and allows the user to draw a selection box.

With one canvas, to draw the selection box you'd have to redraw all of the elements over and over to update the selection box that the user sees since they are all on the same canvas.

Or, you can have two canvases, one with the objects and then another one in front for things like "tools" (like the selection box graphics). Here two canvases are far more efficient.

Other times you may want to have a background that changes very rarely and foreground objects that change all the time. Instead of redrawing all of them at 60 frames per second, you make a background canvas and foreground canvas, and only have the foreground's objects redraw at the fast speed. Here also, two canvases is far more efficient than one.

Page loading? You won't even notice the difference between one canvas and one hundred!