HTML5.0

canvas source

사라링 2012. 6. 5. 16:32

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.

5 Responses to “Using Multiple HTML5 Canvases as Layers”

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.

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+


저작자표시 (새창열림)