HTML5 multiple canvas on a single page

If we use multiple <canvas> 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?

Solution 1:

Sometimes multiple canvases results in better performance. It's best to test if you can afford the time.

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 may be 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 two canvases ought to be more efficient than one, but it may be more optimal to "cache" that background canvas as an image and drawing the image first each frame.

Solution 2:

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.

Solution 3:

Also, HTML5Rocks says it is a best approach.

Solution 4:

According to Mark Pilgrim, it's a good idea to use multiple canvases.

See This Link

Using multiple canvases can simplify things on your end, by isolating regions of the screen to update and isolating input events. If your page is well-suited for dividing-up regions of the screen, I say go for it.