Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

494 CHAPTER 12 Drawing with HTML5

FIGURE 12-22 he annotated image showing that you can mix images and shapes on the canvasT

Lesson summary

■■The <canvas> element is new in HTML5 and provides a drawing context that is acces-

sible using JavaScript.

■■Use the getContext method on the <canvas> element to get a reference to the context

object.

■■Use the fillRect and strokeRect methods to draw rectangles.

■■Methods that start with fill are used to fill the shape with the value of the fillStyle prop-

erty. The fillStyle property can be set to a color, gradient, or pattern.

■■Methods that begin with stroke create an outline of the shape with the value of the

strokeStyle property. The strokeStyle property can be set to a color, gradient, or

pattern.

■■The context object’s properties can be pushed onto a stack by using the save method

or popped from the stack by using the restore method.

■■Use paths to create complex shapes using lines, rectangles, and arcs.

■■Use the fillText and strokeText methods to draw text on the canvas. Use the drawImage

method to draw images on the canvas.