HTML5 multiple canvas on a single page

Also, HTML5Rocks says it is a best approach.

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.

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.