Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

462 CHAPTER 12 Drawing with HTML5

■■moveTo( ) ethod that moves the path to the specified point in the canvas without M

creating a line

■■putImageData() ethod that puts the image data from a specified ImageData M

object back onto the canvas

■■quadraticCurveTo() Method that creates a quadratic Bézier curve

■■rect() Method that creates a rectangle

■■restore() Method that pops the previously saved context state from the stack

■■rotate() Method that rotates the current drawing

■■save() Method that pushes the state of the current context onto a stack

■■scale() Method that scales the current drawing bigger or smaller

■■setTransform() Method that resets the current transform to the identity matrix and

then calls the transform() method

■■shadowBlur Property that sets or gets the blur level setting to use for shadows

■■shadowColor Property that sets or gets the color setting to use for shadows

■■shadowOffsetX Property that sets or gets the horizontal distance setting of the

shadow from the shape

■■shadowOffsetY Property that sets or gets the vertical distance setting of the shadow

from the shape

■■stroke() ethod to draw the path you have definedM

■■strokeRect() ethod to draw a rectangle without fillM

■■strokeStyle Property that sets or gets the color, gradient, or pattern used for strokes

■■strokeText() ethod that draws text on the canvas without fillM

■■textAlign Property that sets or gets the alignment setting for text content

■■textBaseline Property that sets or gets the text baseline setting used when drawing

text

■■transform() Method that replaces the transformation matrix setting for the drawing

■■translate() Method that remaps the (0, 0) position on the canvas

Implementing the canvas

When working with the canvas object, you must get a reference to the canvas context. This

can be accomplished by using the getContext method, which accepts a parameter. Currently,

the only value for the parameter is 2d when using Internet Explorer, but Firefox and Chrome

support an experimental-webgl parameter, which supports three-dimensional drawing.

Expect to see this technology evolve over time.

This lesson focuses on the more mature 2d parameter, which returns a

CanvasRenderingContext2D object. This object will be referred to as the context object. The

Key following example demonstrates the creation of the context object.

Te rms