canvas source

Our bottom layer

This text is displayed if your browser does not support HTML5 Canvas.

function draw1() {
  ctx1.clearRect(0, 0, WIDTH, HEIGHT);
  ctx1.fillStyle = "#FAF7F8";
  ctx1.beginPath();
  ctx1.rect(0,0,WIDTH,HEIGHT);
  ctx1.closePath();
  ctx1.fill();
  ctx1.fillStyle = "#444444";
  ctx1.beginPath();
  ctx1.arc(x, y, 10, 0, Math.PI*2, true);
  ctx1.closePath();
  ctx1.fill();

  if (x + dx > WIDTH || x + dx < 0)
    dx = -dx;
  if (y + dy > HEIGHT || y + dy < 0)
    dy = -dy;

  x += dx;
  y += dy;
}

The code for this animation is fully explained here. Simple Animation in the HTML5 Canvas Element

Our middle layer

This text is displayed if your browser does not support HTML5 Canvas.

function draw2() {
  ctx2.clearRect(0, 0, WIDTH, HEIGHT);
  ctx2.drawImage(city, 0, 0); 
}

We are simply drawing city.png http://html5.litten.com/layers/city.png to the canvas. The sky in this image is transparent.

Our top layer

This text is displayed if your browser does not support HTML5 Canvas.

function draw3() {
  ctx3.clearRect(0, 0, WIDTH, HEIGHT);
  ctx3.fillStyle = "#444444";
  ctx3.save();
  ctx3.translate(200,200);
  ctx3.rotate(x/20); 
  ctx3.fillRect(-15, -15, 30, 30);  
  ctx3.restore();
}

Here we transform the canvas’s coordinate system and rotate the square based on the global variable x which is used in layer 1 also. For more information on transforms with save() and restore() go here Understanding save() and restore() for the Canvas Context

Now to stack them

We use CSS to set all the canvases to an absolute position of (0,0) inside our parent DIV tag.

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

We also use CSS to set the z-index of our canvases. The z-index property specifies the stack order of an element. Items with lower z-index values go behind items with higher z-index values.

Bottom layer
    canvas id="layer1" 
    style="z-index: 1;
    
Middle layer    
    canvas id="layer2" 
    style="z-index: 2;

Top Layer    
    canvas id="layer3" 
    style="z-index: 3;      

DEMO Here's our finished canvas with full source code.

Now it doesn't matter that a canvas can only have one 2d context because we can just make multiple canvases and stack them.

If you have a question that you do not want published as a public comment, then use my contact page.

Have fun with the code as that is the easiest way to learn.

Tags: 2d context, animation, Canvas Element, CSS, CSS 3.0, HTML5, javascript, restore, save

This entry was posted on Monday, July 26th, 2010 at 9:28 pm and is filed under Canvas Element, CSS, HTML5. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.

5 Responses to “Using Multiple HTML5 Canvases as Layers”

Using Multiple HTML5 Canvases as Layers « HTML5 Talk • July 26th, 2010 at 9:36 pm

[...] Full post here… Tags canvas element, HTML5, javascript Categories HTML5 [...]

Dan • April 24th, 2011 at 1:46 pm

Do you know whether you can superimpose a canvas (or stack of canvases) over a Google Map and draw and animate stuff over the map? Thanks for the great writeup.

admin • April 25th, 2011 at 8:59 pm

Hi Daniel
Yes you can and I may do a blog post on that when I get some free time (lately, I’ve been fortunate enough to be kept busy by my clients). I see that you are getting some great responses at Stackoverflow.
http://stackoverflow.com/questions/5770715/is-it-possible-to-load-a-google-map-into-a-div-and-then-overlay-a-canvas-element
So we can see where that gets you.
If you get stuck, let me know.
James

YAU • June 28th, 2011 at 2:22 am

hello james
i created a playing card game which uses multiple canvases.
in the game, each object has its own canvas.
i got the idea of using multiple canvases from this your blog post.
tank you!

ono
http://onohugou.sakura.ne.jp
*supported browsers: firefox4 and chrome10+

YAU • June 28th, 2011 at 5:59 am

im sorry…

http://onohugou.sakura.ne.jp
is japanese version

url of english version is

ono
http://onohugou.sakura.ne.jp/en.html
*supported browsers: firefox4 and chrome10+