- 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.2. Canvas Contexts
The canvas element merely serves as a container for a context. The context provides all the graphics horsepower. Although this book focuses exclusively on the 2d context, the Canvas specification embraces other types of contexts as well; for example, a 3d context specification is already well underway. This section looks at the attributes of the 2d context, with a brief nod to the 3d context.
1.2.1. The 2d Context
In your JavaScript code, you will find little use for the canvas element itself, other than occasionally using it to obtain the canvas width or height or a data URL, as discussed in the preceding section. Additionally, you will use the canvas element to obtain a reference to the canvas’s context, which provides a capable API for drawing shapes and text, displaying and manipulating images, etc. Indeed, for the rest of this book our focus will mainly be on the 2d context.
Table 1.3 lists all of the 2d context attributes. Other than the canvas attribute, which gives you a reference to the canvas itself, all of the 2d context attributes pertain to drawing operations.
Table 1.3. CanvasRenderingContext2D attributes
|
Attribute |
Brief Description |
|
canvas |
Refers to the context’s canvas. The most common use of the canvas attribute is to access the width and height of the canvas: context.canvas.width and context.canvas.height, respectively. |
|
fillStyle |
Specifies a color, gradient, or pattern that the context subsequently uses to fill shapes. |
|
font |
Specifies the font that the context uses when you call fillText() or strokeText(). |
|
globalAlpha |
Is the global alpha setting, which must be a number between 0 (fully transparent), and 1.0 (fully opaque). The browser multiplies the alpha value of every pixel you draw by the globalAlpha property, including when you draw images. |
|
globalComposite- Operation |
Determines how the browser draws one thing over another. See Section 2.14 for valid values. |
|
lineCap |
Specifies how the browser draws the endpoints of a line. You can specify one of the following three values: butt, round, and square. The default value is butt. |
|
lineWidth |
Determines the width, in screen pixels, of lines that you draw in a canvas. The value must be a non-negative, non-infinite double value. The default is 1.0. |
|
lineJoin |
Specifies how lines are joined when their endpoints meet. Valid values are: bevel, round, and miter. The default value is miter. |
|
miterLimit |
Specifies how to draw a miter line join. See Section 2.8.7 for details about this property. |
|
shadowBlur |
Determines how the browser spreads out shadow; the higher the number, the more spread out the shadows. The shadowBlur value is not a pixel value, but a value used in a Gaussian blur equation. The value must be a positive, non-infinite double value. The default value is 0. |
|
shadowColor |
Specifies the color the browser uses to draw shadows. The value for this property is often specified as partially transparent to let the background show through. |
|
shadowOffsetX |
Specifies the horizontal offset, in screen pixels, for shadows. |
|
shadowOffsetY |
Specifies the vertical offset, in screen pixels, for shadows. |
|
strokeStyle |
Specifies the style used to stroke paths. This value can be a color, gradient, or pattern. |
|
textAlign |
Determines horizontal placement of text that you draw with fillText() or strokeText(). |
|
textBaseline |
Determines vertical placement of text that you draw with fillText() or strokeText(). |
The table gives you an overview of all the 2d context attributes. In Chapter 2, we examine all those attributes on a case-by-case basis.
NOTE: You can extend the 2d context’s capabilities
The context associated with each canvas is a powerful graphics engine that supports features such as gradients, image compositing, and animation, but it does have limitations; for example, the context does not provide a method for drawing dashed lines. Because JavaScript is a dynamic language, however, you can add new methods or augment existing methods of the context. See Section 2.8.6, “Drawing Dashed Lines by Extending CanvasRenderingContext2D,” on p. 118 for more information.
1.2.1.1. The WebGL 3d Context
The Canvas 2d context has a 3d counterpart, known as WebGL, that closely conforms to the OpenGL ES 2.0 API. You can find the WebGL specification, which is maintained by the Khronos Group, at http://www.khronos.org/registry/webgl/specs/latest/.
At the time this book was written, browser vendors were just beginning to provide support for WebGL, and there are still some notable platforms, such as iOS4 and IE10, that do not provide support. Nonetheless, a 3d Canvas context is an exciting development that will open the door to all sorts of bleeding edge applications.
1.2.2. Saving and Restoring Canvas State
In Section 1.2.1, “The 2d Context,” on p. 9 we discussed all of the attributes of the Canvas context. You will often set those attributes for drawing operations. Much of the time you will want to temporarily set those attributes; for example, you may draw a grid with thin lines in the background and subsequently draw on top of the grid with thicker lines. In that case you would temporarily set the lineWidth attribute while you draw the grid.
The Canvas API provides two methods, named save() and restore(), for saving and restoring all the canvas context’s attributes. You use those methods like this:
functiondrawGrid(strokeStyle,fillStyle){controlContext.save();// Save the context on a stack controlContext.fillStyle=fillStyle;controlContext.strokeStyle=strokeStyle;// Draw the grid... controlContext.restore();// Restore the context from the stack}
The save() and restore() methods may not seem like a big deal, but after using Canvas for any length of time you will find them indispensable. Those two methods are summarized in Table 1.4.
Table 1.4. CanvasRenderingContext2D state methods
|
Method |
Description |
|
save() |
Pushes the current state of the canvas onto a stack of canvas states. Canvas state includes the current transformation and clipping region and all attributes of the canvas’s context, including strokeStyle, fillStyle, globalCompositeOperation, etc. The canvas state does not include the current path or bitmap. You can only reset the path by calling beginPath(), and the bitmap is a property of the canvas, not the context. Note that although the bitmap is a property of the canvas, you access the bitmap through the context (via the context’s getImageData() method). |
|
restore() |
Pops the top entry off the stack of canvas states. The state that resides at the top of the stack, after the pop occurs, becomes the current state, and the browser must set the canvas state accordingly. Therefore, any changes that you make to the canvas state between save() and restore() method calls persist only until you invoke the restore() method. |
NOTE: You can nest calls to save() and restore()
The context’s save() method places the current state of the context onto a stack. The corresponding call to restore() pops the state from the stack and restores the context’s state accordingly. That means you can nest calls to save()/restore().
NOTE: Saving and restoring the drawing surface
This section shows you how to save and restore context state. It’s also beneficial to be able to save and restore the drawing surface itself, which we discuss in Section 1.7, “Saving and Restoring the Drawing Surface,” on p. 33.