- 1.1. The canvas Element
- 1.2. Canvas Contexts
- 1.3. Canonical Examples in This Book
- 1.4. Getting Started
- 1.5. Fundamental Drawing Operations
- 1.6. Event Handling
- 1.7. Saving and Restoring the Drawing Surface
- 1.8. Using HTML Elements in a Canvas
- 1.9. Printing a Canvas
- 1.10. Offscreen Canvases
- 1.11. A Brief Math Primer
- 1.12. Conclusion
This chapter is from the book
This chapter is from the book
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. 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
<!DOCTYPEhtml><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><imgid='snapshotImageElement'/><canvasid='canvas'width='400'height='400'>Canvas not supported</canvas><scriptsrc='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.varcanvas=document.getElementById('canvas'),context=canvas.getContext('2d'),... // Functions..........................................................functionupdateClockImage(){snapshotImageElement.src=canvas.toDataURL();}functiondrawClock(){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();}...