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 canvas2. Here is the code that will be used to provide a reference to both <canvas> elements:

if (!canvasSupport()) {
     return;

  }else{

   var theCanvas = document.getElementById("canvas");
   var context = theCanvas.getContext("2d");
   var theCanvas2 = document.getElementById("canvas2");
   var context2 = theCanvas2.getContext("2d");

}

Example 4-17 will use the tile sheet image from earlier examples and draw it to the first canvas. It will then copy a 32×32 square from this canvas and place it on the second canvas.

Example 4-17. Copying from one canvas to another

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CH4EX17: Canvas Copy</title>
<script src="modernizr.js"></script>
<script type="text/javascript">
window.addEventListener('load', eventWindowLoaded, false);
function eventWindowLoaded() {

   canvasApp();

}

function canvasSupport () {

     return Modernizr.canvas;

}

function canvasApp(){
   if (!canvasSupport()) {
      return;
   }else{
      var theCanvas = document.getElementById("canvas");
      var context = theCanvas.getContext("2d");
      var theCanvas2 = document.getElementById("canvas2");
      var context2 = theCanvas2.getContext("2d");
   }

   var tileSheet = new Image();
   tileSheet.addEventListener('load', eventSheetLoaded , false);
   tileSheet.src="tanks_sheet.png";


   function eventSheetLoaded() {

      startUp();
   }

   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-18 shows the canvas copy functions in operation.

An example canvas copy operation

Figure 4-18. 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 applications, such as stock portfolio charting and personalization features.

Get HTML5 Canvas, 2nd Edition now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.

Start your free trial