Drawing on the Canvas - HTML5 Canvas - page 72

Figure 2-3. Line cap and join
Thesethreelineandjoinsamplesshouldhelpillustrate someofthecombinations ofattributes
we can use to draw paths on the canvas.
The first sample attempts to draw starting at the top left of the canvas, resulting in a strange
image. Canvas paths are drawn outward in both the x and y directions from the center of the
pixel it begins on. For this reason, the top line in Sample 1 seems to be thinner than the 10
pixelswespecified.Inaddition,the“round”endofthetop-lefthorizontallinesegmentcannot
be seen because both of these were drawn off the screen in the “negative” value areas of the
screen coordinates. Furthermore, the diagonal “bevel” at the lineJoin is not drawn.
Sample 2 rectifies the problems in Sample 1 by offsetting the beginning of the drawing away
from the top left. This allows the entire horizontal line to be drawn, as well as the “round”
lineCap and the “bevel” lineJoin .
Sample 3 shows us eliminating the extra lineCap in favor of the default “butt,” and changing
the lineJoin to “round.”