HTML and CSS Reference
In-Depth Information
}
}
theCanvas.addEventListener("mousemove", onMouseMove, false);
theCanvas.addEventListener("click", onMouseClick, false);
}
</script>
</head>
<body>
<div>
<canvas id="canvas" width="256" height="256" style="position: absolute;
top: 50px; left: 50px;">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
As of this writing, you must run this application from a web server in
order to manipulate the local
tanks_sheet.png
file on the canvas. If you
are using the Safari browser (version 5.1 as of this writing), you can test
the application on a local drive and it will function properly.
Copying from One Canvas to Another
The canvas allows us to use another canvas as the source of a bitmap drawing operation.
Let's take a quick look at how we might utilize this functionality.
We will need to modify the base file for this chapter and create an extra
<canvas>
tag
in our HTML. We will name this extra
<canvas>
element
canvas2
(it can be given any
id as long as it is not the same id as the first
<canvas>
). Here is what our HTML
<body>
will look like now:
<body>
<div>
<canvas id="canvas" width="256" height="256" style="position: absolute;
top: 50px; left: 50px;">Your browser does not support HTML5 Canvas.</canvas>
<canvas id="canvas2" width="32" height="32" style="position: absolute;
top: 256px; left: 50px;">Your browser does not support HTML5 Canvas.</canvas>
</div>
</body>
We will place the second
<canvas>
below the original, and give it a
width
and
height
of
32
. We will also need to create a new context and internal reference variable for
can
vas2
. Here is the code that will be used to provide a reference to both
<canvas>
elements:
if (!canvasSupport()) {
return;
