Training Guide: Programming in HTML5 with JavaScript and CSS3 Ebook

Lesson 1: Drawing by using the <canvas> element CHAPTER 12 475

In this example, the lineWidth, strokeStyle, and lineJoin properties are set, and a rectangle

is drawn. The save method is called to save the settings. The settings are modified, and a new

rectangle is drawn with the new settings. Finally, the restore method is called, which pops

(gets and removes) the settings from the stack, and a rectangle is drawn. This rectangle has

the same property settings as the first rectangle. The result is shown in Figure 12-9.

FIGURE 12-9 howing how the settings can be saved and restoredS

You can save many times to create a stack of settings and then restore many times to

empty the stack.

Drawing by using paths

A path is a set of lines that are used to draw shapes. Each line is called a sub-path. Each sub-

path has a start and an end, and the end of one sub-path is typically where the next sub-path

starts. The collection of sub-paths makes a shape.

The sequence for creating a shape is as follows.

1. Start a path by calling the beginPath method.


2. Go to the starting position by calling the moveTo method.


3. Draw sub-paths calling methods such as lineTo and rect.


4. End the path by optionally calling the closePath method.


5. Render the filled shape or outlined shape by calling fill or stroke methods, respectively.

Key
Te rms