128 Chapter 5—Canvas
Figure 5.15 Attributes for determining line stylesThe lineWidth is specified in pixels; the default setting is 1.0. As with the two
other line attributes, the line width applies not only to lines and polygons, but
also to rectangles created with strokeRect().
If we want to add a cap to a line with lineCap, we can choose butt, round, or
square; butt is the default value. If we use round, the line gets a round cap by
adding a semicircle at the end of the line with half the lineWidth as a radius. For
square, the semicircle is replaced by a rectangle with a height of half the line
width.
To create beveled line joins, we use the attribute lineJoin with bevel; we can
also round the corners and create mitered joins with miter, which is the default
value. To stop the angle of miter lines from becoming too acute, the specification
provides the attribute miterLimit with a default value of 10.0. This is the ratio of
the length of the tapered point (the distance between the intersection of lines
and point) to half the line width. If the miterLimit is exceeded, the point will be
trimmed, creating the same effect as in bevel.
To fill paths with a color or gradient, we first need to set the appropriate style at-
tribute with fillStyle and then call the following path method:context.fill()