HTML and CSS Reference
In-Depth Information
Figure 4-4.
Differences between
butt
,
round
, and
square
As you can see in Figure 4-4, a
lineCap
value of
butt
ends exactly at the end coordinates specified in
the
lineTo()
method. On the other hand,
lineCap
values of
round
and
square
extend the line by an amount
equal to the width of the line, because additional pixels equal to half of the line width are used for the cap.
For example, consider a line with width of 10 pixels, a start point (10,100), and an end point (190,100). The
length of the line including the start and end points is 180 pixels. If you specify a
lineCap
mode of
butt
, the
resulting line has a length of exactly 180 pixels. However, with a
lineCap
mode of
round
or
square
, the
length of the line is 190 pixels (180 pixels + an additional 5 pixels at the start + an additional 5 pixels at the
end for a line).
Listing 4-4 shows how to use the
lineWidth
and
lineCap
properties, and Figure 4-5 shows the resulting
lines.
Figure 4-5.
Different
lineCap
settings in action
