HTML and CSS Reference
In-Depth Information
Name
Description
Example
Sets the type of endings that are put on lines. The
choices are
butt
,
round
, and
square
. A value
of
butt
indicates that there is a flat edge at the
end of the specified line. A value of
round
adds
a semicircle with a diameter the width of the line
to the end of the line. A value of
square
adds a
rectangle with a width half of the line's width and
a length equal to the line's width at the end of the
line. The default is
butt
.
lineCap
context.lineCap =
"round";
lineJoin
Sets the type of corners that occur when two
lines meet. The choices are
miter
,
bevel
, and
round
. On all joins, a filled triangle connecting the
two lines is connected. A value of
bevel
uses only
this filled triangle. A value of
miter
indicates that
in addition to the triangle, a second filled triangle
is created. The second triangle consists of a line
that connects the two lines as well as the two lines
themselves extended until they meet. A value of
round
indicates that corners should be rounded
when lines meet. The arc has a diameter equal to
the width of the line. The default is
miter
.
context.lineJoin =
"round";
lineWidth
Sets the width of the lines. The default value is 1.
context.lineWidth = 5;
miterLimit
Sets the max length that a line will be extended if
lineJoin
is set to
miter
. If the length necessary
to join the lines is greater than the
miterLimit
,
the join will not occur. The default is 10.
context.miterLimit = 1;
T
ABLE
3-16
canvas Line Properties
Name
Description
Example
Sets the size of the blurring effect.
The default value is
0
.
shadowBlur
context.shadowBlur = 4;
Sets the color of the shadow. The
default is transparent black.
shadowColor
context.shadowColor =
"rgba(255, 48, 48, 0.5)";
shadowOffsetX
Sets the distance that the shadow will
be offset in the horizontal direction.
The default value is
0
.
context.shadowOffsetX = 5;
Sets the distance that the shadow
will be offset in the vertical direction.
The default value is
0
.
shadowOffsetY
context.shadowOffsetY = -10;
T
ABLE
3-17
canvas Shadow Properties
