5.5 Paths 127Figure 5.14 The path method “rect()”
5.5.5 Outlines, Fills, and Clipping Masks..........................................
If we think back to the three stages of creating a path with initialization—deter-
mining path, geometry, and drawing—we have now reached the third and last
stage: the drawing. Here we decide what the path should look like. In all previ-
ous examples, we chose a simple outline at this point, created via the following
method:
context.stroke()
The line color is determined by the attribute strokeStyle. You can also define the
width of the line (lineWidth), what the ends of the line should look like (lineCap),
and the join between lines (lineJoin) using three other Canvas attributes (the
asterisk indicates default values; we will encounter it repeatedly from now on):
context.lineWidth = [ Pixel ]
context.lineCap = [ butt, round, square ]
context.lineJoin = [ bevel, round, miter ]
Figure 5.15 provides examples of the width, end, and join attributes.