About using multiple canvas layers

[Jon Goikolea]

After reading this article on Samsung Galaxy III on Rich's site, a couple of questions have come to my mind.

 

How many canvas layers do you use in your games? How does this number affect going multi-device? I find using multiple canvas very handy, but I know this might lower the performance when the device or browser is not so powerful.

 

Linked to this, how do you handle the canvas clearing issue? For the moment I'm trying to clear only the changing areas, so i'ts fundamental to have more than one canvas.

[remvst]

I always use only one canvas, as I've never really noticed the difference. Especially since the clearing issue on the S3 seems to be solved only by drawing a colored rectangle, which.

 

And I always clear the whole canvas for each frame. Redrawing only changed areas might be better, but it is also harder and doesn't work when the whole screen changes at each frame.

[rich]

The issues with the Samsung were to do with the layering of visible canvas objects - the GPU gets in a fluster and the display corrupts badly. But you can certainly use multiple canvases, for example I often use one for pixel perfect hit testing or if I need to create a special effect I'll render it to a hidden canvas object first, then copy to the main game one.

[@99golems]

Normally i have one visible canvas. 

 

One game I didn't finished used two visible canvases stacked. the back one was webGL for drawing background stars. the top one was 2d that contained the actual game. Performance was just fine but i only ever tried it on desktop browsers.

 

I use hidden canvases all the time for drawing things to for resizing, or reflecting, or sometimes backbuffering, but I usually only ever have one visible at a time.

[FBN]

I seem to get a similar issue with the Galaxy Note 10.1, using kineticjs

[Dream Of Sleeping]

I've gone canvas layering crazy, and I think I might rewrite all my code just to use one or two.

 

Because the animation can seem so choppy in certain browers like firefox I initially thought it would be better with lots of layers, but it doesn't seem to make any difference. Even when my frame rate is 200 frames per second, firefox still looks like it's only rendereing at 20 frames per second.

 

My game has a ball layer so when the ball moves that's the only thing  that needs to be updated. I also have a ballLayer2, for when the ball needs to appear above other objects. I have a cannon layer for 16 cannons. I have a dragged layer for whenever the ball or cannon is dragged it's copied onto this layer. I have 2 text layers. I have a grass layer for the big background. That one I don't regret. I also have a goal layer.

 

Also I noticed that if the canvas has style display set to none, you can have as many cavases as you like (even a million) with no change of performance. So currently after a scene in my game transitions into another I set those cavases display to none.

 

Each sprite has  a renderFlag() method which can be set to clear, draw or redraw. Then it's taken care of in the render function.

 

At the moment I'm having trouble with the animation stuttering at the beginning if I open a webrowser and play the game straight away. The game carries on updating at 200 frames per second, while the animation lags behind. If I use requestAnimationFrame the only difference is the processing power increases and even on frames that draw nothing the cpu it use eems to be the same as if it is drawing something.

 

Not sure what to do. I might just finish my game and worry about it after. It won't be hard to convert it all to just one canvas.

[Krzysztof Jankowski]

I use a few layers offscreen and re-render them as I need. And one visible layer for game (drawing all layers on it). So when I move my map around i just drawing those layers with different offset. When i add new sprite eg. Unit I just redrawn layer with units.