HTML and CSS Reference
In-Depth Information
function startUp(){
context.drawImage(tileSheet, 0, 0);
context2.drawImage(theCanvas, 32, 0,32,32,0,0,32,32);
}
}
</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>
<canvas id="canvas2" width="32" height="32" style="position: absolute;
top: 256px; left: 50px;">Your browser does not support HTML5 Canvas.</canvas>
</div>
</body>
</html>
Figure 4-14
shows the canvas copy functions in operation.
Figure 4-14. An example canvas copy operation
Canvas copy operations can be very useful when creating applications that need to
share and copy image data across multiple
<div>
instances on (and the
Canvas
object
within) a web page. For example, multiple
Canvas
elements can be spread across a web
page, and as the user makes changes to one, the others can be updated. This can be
used for fun applications, such as a “minimap” in a game, or even in serious applica-
tions, such as stock portfolio charting and personalization features.
