HTML and CSS Reference
context.drawImage(tileSheet, 0, 0);
context2.drawImage(theCanvas, 32, 0,32,32,0,0,32,32);
<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>
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.