Is using multiple canvas objects a good practice?

Question

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 02 '13 at 08:19
You should remove the "other question". And don't post it again, unless you want it to get put "On Hold" :) — MartinTeeVarga, Jul 02 '13 at 10:22

CuddleBunny · Answer 1 · 2014-08-11T20:49:57.093

8

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
}

edited Aug 11 '14 at 20:49

answered Jul 02 '13 at 13:31

CuddleBunny

181
4

2

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 02 '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 04 '13 at 09:00
@sm4 Good point, I'll add something. – CuddleBunny Jul 15 '13 at 13:45

score 2 · Answer 2 · answered Jul 02 '13 at 13:32

2

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.

answered Jul 02 '13 at 13:32

Katana314

706
4
8

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. – House Jul 02 '13 at 17:26

Is using multiple canvas objects a good practice?

2 Answers2