HTML5 Guidelines for Web Developers

118 Chapter 5—Canvas

Figure 5.6 The letter A as a path

Let’s look closer at the source code for this example. We can see the three phases

of creating the path:

1. Initialize a new path with beginPath()


2. Define the path geometry with moveTo() and lineTo() calls


3. Draw the lines with stroke()

Each path must be initialized with beginPath() and can then contain any num-

ber of segments. In our example, we have two segments that reproduce the

hand movements when writing through combinations of moveTo() and line-

To(). This creates first the roof shape and then the horizontal line of the letter A.

With stroke(), we then draw the defined path onto the canvas.

The decision whether and when segments of a path will be separated into several

individual paths is entirely dependent on the layout. Each path can only be for-

matted in its entirety. So, if we wanted the horizontal line of the letter A to have a

different color, we would need to define two separate paths.

Let’s look at the main path drawing methods in more detail.