Is using multiple canvas objects a good practice?

We're developing a jump and run game with HTML5 and JavaScript and have to build an own game framework for this. Here we have some difficulties and would like to ask you for some advice:

We have a "Stage" object, which represents the root of our game and is a global div-wrapper. The stage can contain multiple "Scenes", which are also div-elements. We would implement a Scene for the playing task, for pause, etc. and switch between them. Each scene can therefore contain multiple "Layers", representing a canvas. These Layer contain "ObjectEntities", which represent images or other shapes like rectangles, etc. Each Objectentity has its own temporaryCanvas, to be able to draw images for one entity, whereas another contains a rectangle.

We set an activeScene in our Stage, so when the game is played, just the active scene is drawn. Calling activeScene.draw(), calls all sublayers to draw, which draw their entities (calling drawImage(entity.canvas)). But is this some kind of good practice? Having multiple canvas to draw? Each game loop every layer-context is cleared and drawn again. E.g. we just have a still Background-Layer, … wouldn't it be more useful to draw this once and not to clear it every time and redraw it? Or should we use a global canvas for example in the Stage and just use this canvas to draw? But we thought this would be to expensive...

• Why exactly do you have multiple canvas ? If it's an optimization, why don't you just test with and without ? – Denys Séguret Jul 2 '13 at 8:19
• You should remove the "other question". And don't post it again, unless you want it to get put "On Hold" :) – MartinTeeVarga Jul 2 '13 at 10:22

This page contains an excellent list of optimizations that can be made to canvas. In the section labeled "Use multiple layered canvases for complex scenes" it describes why having multiple canvas objects is actually better in many cases because you don't have to redraw large expensive objects (background images) as frequently as smaller, fast moving ones (projectiles). Here is a tutorial to get you started. In a nutshell, simply create a number of canvases for things that require drawing differently and line them up with absolute positioning:

position:absolute;
left:0px;
top:0px;


Each canvas object can be named and layered using z-index:

<canvas id="layer1" style="z-index: 1;" />
<canvas id="layer2" style="z-index: 2;" />


Finally, draw to the different contexts:

function draw1() {
context1... // draw background
}

function draw2() {
context2... // draw character
}

function draw3() {
context3... // draw bullets
}

• It would be nice if you could make a small abstract from those links. Otherwise your answer might become invalid when the links stop working... – MartinTeeVarga Jul 2 '13 at 13:51
• Thanks these links are quite good. I managed just do redraw special dirty areas, if a object moves for example. – user1818924 Jul 4 '13 at 9:00
• @sm4 Good point, I'll add something. – CuddleBunny Jul 15 '13 at 13:45

Contre Jour does this, in fact. I don't know many details, but you may be able to find more technical notes from them. If you play their game, I believe each of the landmasses your character interacts with are canvases.

It seems to be a good idea to seperate your active portions of the game into canvases. For instance, if you were making an RTS, the command bar might make sense to be a seperate canvas to only redraw once in a while.

• Telling us that a released game does this is interesting, but doesn't tell us if it's a good practice. Perhaps the developers regretted the decision? Also, some sources to evidence of their use would be nice. – MichaelHouse Jul 2 '13 at 17:26