Best way for pre-rendering with HTML5's Canvas?

Question

I'm trying to do a game development API for Google's GWT to make Canvas Games, and I got a question with the prerendering issue.

First: I am not entirely sure how browsers/Javascript/GWT manage a deleted canvas, if its data stay on memory or not, after using a removeChild() or RootPanel.Remove() (with GWT), or even the correct method to remove it from memory.

So the solution I've came about is using multiple (as needed) big, hidden canvases as a pre-render palette and use drawImage() magic to jump around the prerendered images drawing on the main context, and having my own problems with insertion, removal, empty spaces, etc.

Is this the best solution? Or should I try using one little canvas for every little image and texture that is prerendered? Or should I try something completely different whatsoever?

Thanks in advance, and sorry for my spelling.

Answer 1

using a canvas to pre-render your items is a good idea, however it's not always the best choice. If your items are complex (with gradient, shadows and visual effect), so yes it will be good. But if your items are simple (images, polygons, simple bezier curves, ...), your framerate won't increase but can decrease (because of the drawImage). It's then better to render in realtime.

From my experiments, you won't lose performance by using several small canvas (may be few memory) but it can be easier to manage than a big canvas (like an object oriented scene). If your items change sometimes, you are sure to easily manage the size of your temporary canvases.

Hope this help.