- 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.7. Saving and Restoring the Drawing Surface
In Section 1.2.2, “Saving and Restoring Canvas State,” on p. 11, you saw how to save and restore a context’s state. Saving and restoring context state lets you make temporary state changes, which is something you will do frequently.
Another essential feature of the Canvas context is the ability to save and restore the drawing surface itself. Saving and restoring the drawing surface lets you draw on the drawing surface temporarily, which is useful for many things, such as rubber bands, guidewires, or annotations. For example, the application shown in Figure 1.15 and discussed in Section 2.13.1, “Translating, Scaling, and Rotating,” on p. 171, lets users interactively create polygons by dragging the mouse.
)
Figure 1.15. Drawing guidewires
On a mouse down event, the application saves the drawing surface. As the user subsequently drags the mouse, the application continuously restores the drawing surface to what it was when the mouse went down and then draws the polygon and the associated guidewires. When the user releases the mouse, the application restores the drawing surface one last time and draws a final representation of the polygon, without guidewires.
The JavaScript from the application shown in Figure 1.15 that pertains to drawing the guidewires is listed in Example 1.7. See Section 2.11.1, “Polygon Objects,” on p. 147 for a more complete listing of the application.
NOTE: Image manipulation with getImageData() and putImageData()
The application shown in Figure 1.15 saves and restores the drawing surface with the context’s getImageData() and putImageData() methods. Like drawImage(), getImageData() and putImageData() can be used in a number of different ways; one common use is implementing image filters that get an image’s data, manipulate it, and put it back into a canvas. You will see how to implement image filters in Section 4.5.2.3, “Filtering Images,” on p. 293, among other uses for getImageData() and putImageData().
NOTE: Immediate-mode graphics
Canvas implements what’s known as immediate-mode graphics, meaning that it immediately draws whatever you specify in the canvas. Then it immediately forgets what you have just drawn, meaning that canvases do not retain a list of objects to draw. Some graphics systems, such as SVG, do maintain a list of objects to draw. Those graphics systems are referred to as retained-mode graphics.
Immediate-mode graphics, because it does not maintain a list of objects to draw, is more low-level than retained-mode graphics. Immediate-mode graphics is also more flexible because you draw straight to the screen instead of adjusting objects that the graphics system draws for you.
Immediate-mode graphics is more suited to applications, such as paint applications, that do not keep track of what the user has drawn, whereas retained-mode graphics is more suited to applications, such as drawing applications, that let you manipulate graphical objects that you create.
In Section 2.11.1, “Polygon Objects,” on p. 147 you will see how to implement a simple retained-mode graphics system that maintains an array of polygons in a drawing application, which lets users drag those polygons to reposition them.
Example 1.7. Drawing guidewires by saving and restoring the drawing surface
varcanvas=document.getElementById('canvas'),context=canvas.getContext('2d'),... // Save and restore drawing surface...................................functionsaveDrawingSurface(){drawingSurfaceImageData=context.getImageData(0,0,canvas.width,canvas.height);}functionrestoreDrawingSurface(){context.putImageData(drawingSurfaceImageData,0,0);}// Event handlers..................................................... canvas.onmousedown=function(e){...saveDrawingSurface();...};canvas.onmousemove=function(e){varloc=windowToCanvas(e);if(dragging){restoreDrawingSurface();...if(guidewires){drawGuidewires(mousedown.x,mousedown.y);}}};canvas.onmouseup=function(e){...restoreDrawingSurface();};