HTML and CSS Reference
In-Depth Information
lineCap attributes
The
lineCap
is the end of a line drawn on the context. It can be one of
context.lineCap.
three values:
butt
The default; a flat edge that is perpendicular to the edge of the line.
round
A semicircle that will have a diameter that is the length of the line.
square
A rectangle with the length of the line width and the width of half the line width
placed flat perpendicular to the edge of the line.
lineJoin attributes
The
lineJoin
is the “corner” that is created when two lines meet. This
is called a
join
. A filled triangle is created at the join, and we can set its basic properties
with the
lineJoin
Canvas attribute.
context.lineJoin.
miter
The default; an edge is drawn at the join. The
miterLimit
is the maximum allowed
ratio of miter length to line width (the default is 10).
bevel
A diagonal edge is drawn at the join.
round
A round edge is drawn at the join.
lineWidth
The
lineWidth
(default = 1.0) depicts the thickness of the line.
strokeStyle
The
strokeStyle
defines the color or style that will be used for lines and around shapes
(as we saw with the simple rectangles in
Example 2-2
).
Examples of More Advanced Line Drawing
Example 2-3
shows these attributes in action; the results are depicted in
Figure 2-3
.
There are a few oddities when drawing lines on the canvas, which we will point out
along the way.
