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

Back to the article Using Multiple HTML5 Canvases as Layers

Here's the source code.
This example is coded for readability and not for optimized operation. All you need is a text editor like notepad, a copy of the image city.png (rightclick and save it) and an HTML5 friendly browser (I'm using Firefox 3.6).

You can copy this code and paste it into a new file called something like layers.html with the city.png image http://html5.litten.com/layers/city.png (they must be in the same directory) and when you open it with an HTML5 friendly browser like Firefox 3.6 it will display the stacked canvases.

  
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Canvas Layers Test</title>
</head>
<body>
<section>
<div id="canvasesdiv" style="position:relative; width:400px; height:300px">
<canvas id="layer1"
style="z-index: 1;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="layer2"
style="z-index: 2;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
<canvas id="layer3"
style="z-index: 3;
position:absolute;
left:0px;
top:0px;
" height="300px" width="400">
This text is displayed if your browser does not support HTML5 Canvas.
</canvas>
</div>

<script type="text/javascript">
var layer1;
var layer2;
var layer3;
var ctx1;
var ctx2;
var ctx3;
var x = 400;
var y = 300;
var dx = 2;
var dy = 4;
var WIDTH = 400;
var HEIGHT = 300;
var city = new Image();

function init() {
city.src ="city.png";
layer1 = document.getElementById("layer1");
ctx1 = layer1.getContext("2d");
layer2 = document.getElementById("layer2");
ctx2 = layer2.getContext("2d");
layer3 = document.getElementById("layer3");
ctx3 = layer3.getContext("2d");
setInterval(drawAll, 20);
}

function drawAll() {
draw1();
draw2();
draw3();
}

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;
}

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

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();
}

init();
</script>
</section>
</body>
</html>