3 layered canvas in Html5

Question

I'm trying to create a simple game, but I'm wondering how to implement 3 layered in canvas, somehow like in a photoshop. I want the background to be as background, the transparent one would be something it can reflect the background to the foreground and foreground layer would be the main animations/rendering. Will that be a good point for performance? Also, how to implement the 3 layered structure here?

HTML

<div id ="container">
        <canvas id = "canvas_background" width = "800" height = "500">
            <canvas id = "canvas_trans" width = "800" height = "500">
                <canvas id = "canvas_foreground" width = "800" height = "500">

                </canvas>
            </canvas>
        </canvas>
    </div>

CSS

#container {
width: 800px;
margin: 20px auto;
height: 200px;
}

#canvas_background{
border: 1px solid #666;
position: absolute;
}

#canvas_trans{
position: absolute;
background-color: transparent;
z-index: 1;
}

#canvas_foreground{
position: absolute;
 }

possible duplicate of [html5 - canvas element - Multiple layers](http://stackoverflow.com/questions/3008635/html5-canvas-element-multiple-layers) — John Bupit, Feb 27 '15 at 12:38

score 4 · Accepted Answer · answered Feb 27 '15 at 12:41

Multiple canvas layers can definitely be a good thing for performance! If your background layer only needs to be drawn once each scene, then it allows you to redraw your foreground lots of times, without having to worry about wasting time redrawing the background.

However, they need to be layered rather than nested.

<div id = "container" class = "container">
  <canvas id = "canvas_background" width = "800" height = "500"></canvas>
  <canvas id = "canvas_trans" width = "800" height = "500"></canvas>
  <canvas id = "canvas_foreground" width = "800" height = "500"></canvas>
</div>

Thankfully, this is trivial with CSS. We can use absolute positioning and take advantage of the fact that DOM elements are transparent by default.

.container {
  position: relative;
}

.container > canvas {
  position: absolute;
  top: 0;
  left: 0;
}

This will set all canvas elements to be absolutely positioned within the container element.

The last thing you'll need to remember is that to clear the canvases, you'll have to use the context.clearRect method, in order to return the canvas to transparency, rather than filling it with a solid colour.

Oh I thought it should be nested in order to properly layered all of it. Anyways, thanks for the answer! Appreciated it. Yep, I would draw the background once and able to walk my character (which needs to be rendered all the way) in the foreground layered with the help of the transparent canvas. Would that work? — user3323654, Feb 27 '15 at 12:55

score 2 · Answer 2 · answered Feb 27 '15 at 12:43

I would suggest to handle this in your logic : do three functions, it is less ressource intensive, and more maintainable, if you need more "layers" just create new functions. Don't mess your dom up.

var drawBackground = function(){
  //works with images
  canvas2d.globalAlpha = 1;
  //draw background elements.
};

var drawTrans = function(){
  //works with images
  canvas2d.globalAlpha = 0.5;
  //draw Transparent elements.
};

var drawForeground = function(){
  canvas2d.globalAlpha = 1;
  //draw foreground  elements.
};

In each of them, you draw only the items of that layer you can set the transparency of an image by setting the globalAlpha parameter BEFORE you draw the image. For shapesn use

canvas2d.fillStyle = "rgba(255, 255, 255, 0.5)";

for example.

it's probably a good thing to do also hmmm i would try this one too! thanks man! — user3323654, Feb 27 '15 at 12:57

3 layered canvas in Html5

2 Answers2