Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
This chapter is from the book

1.10. Offscreen Canvases

Another essential Canvas feature is the ability to create and manipulate offscreen canvases. For example, you can, in most cases, considerably boost your performance by storing backgrounds in one or more offscreen canvases and copying parts of those offscreen canvases onscreen.

Another use case for offscreen canvases is the clock that we discussed in the preceding section. Although that application shows you how to implement a general solution that requires user interaction to switch from canvas to image, a clock is a better candidate for an application that does that switching behind the scenes without user intervention.

An updated version of the clock application is shown in Figure 1.20. Once a second, the application draws the clock into the offscreen canvas and assigns the canvas’s data URL to the src attribute of an image. The result is an animated image that reflects the offscreen canvas. See Section 1.9, “Printing a Canvas,” on p. 46 for more information on canvas data URLs.

Figure 1.20

Figure 1.20. Using an offscreen canvas for an image clock

The HTML for the application shown in Figure 1.20 is listed in Example 1.13.

Example 1.13. An image clock: HTML

<!DOCTYPE html>
   <head>
     <title>Image Clock</title>

     <style>
        body {
           background: #dddddd;
        }

        #canvas {
           display: none;
        }

        #snapshotImageElement {
           position: absolute;
           left: 10px;
           margin: 20px;
           border: thin solid #aaaaaa;
        }
     </style>
  </head>

  <body>
     <img id='snapshotImageElement'/>

     <canvas id='canvas' width='400' height='400'>
        Canvas not supported
     </canvas>

     <script src='example.js'></script>
  </body>
</html>

Notice the CSS for the canvas in the HTML—the canvas is invisible because its display attribute is set to none. That invisibility makes it an offscreen canvas. You can also programmatically create an offscreen canvas, like this: var offscreen = document.createElement('canvas');.

The JavaScript pertinent to the offscreen canvas for the application shown in Figure 1.20 is listed in Example 1.14.

Example 1.14. The image clock: JavaScript (excerpt)

// Some declarations and functions omitted for brevity.
// See Section 1.9 on p. 46) for a complete listing of
// the clock.

var canvas = document.getElementById('canvas'),
    context = canvas.getContext('2d'),
    ...

// Functions..........................................................

function updateClockImage() {
   snapshotImageElement.src = canvas.toDataURL();
}

function drawClock() {
   context.clearRect(0, 0, canvas.width, canvas.height);

   context.save();

   context.fillStyle = 'rgba(255,255,255,0.8)';
   context.fillRect(0, 0, canvas.width, canvas.height);

   drawCircle();
   drawCenter();
   drawHands();

   context.restore();

   drawNumerals();

   updateClockImage();
}
...
  • + Share This
  • 🔖 Save To Your Account