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?
Add a comment
|
5 Answers
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.
2 Comments
絢瀬絵里
oftentimes? Then under what circumstances multiple canvases results in worse performance?
Simon Sarris
On extremely large canvases it may be better to simply redraw simple background and foreground scenes (or save them to images) than to have 3+ large canvases.
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.
1 Comment
menardmam
you said : using a javascript graphing library. can you tell me the name of this ?
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.
3 Comments
shaman.sir
I can't see this concrete cite currently in this article, and the Great WayBack Machine have't archived it :(. It was removed from there with time? Why?
Nikita Rybak
@shaman.sir It's available here: web.archive.org/web/20120106035725/http://diveintohtml5.ep.io/…
Nikita Rybak
It's a nice tutorial, but I can't find any content related to multiple canvases in there.
Also, HTML5Rocks says it is a best approach:
If your game or multimedia app can be split up into a foreground and background, consider rendering these on separate canvases to get a significant performance boost.
You can often take advantage of imperfect human perception and render the background just once or at a slower speed compared to the foreground (which is likely to occupy most of your user’s attention). For example, you can render the foreground every time you render, but render the background only every Nth frame.
this approach generalizes well for any number of composite canvases
Comments
A single instance runs smoothly, more does not affect 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.
