Home > Articles > Web Development > HTML/CSS

  • Print
  • + Share This
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.

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:

function drawGrid(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.

  • + Share This
  • 🔖 Save To Your Account