HTML and CSS Reference
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
Figure 4-5. Different lineCap settings in action