HTML and CSS Reference
In-Depth Information
Name
Description
Example
Creates a new
CanvasGradient
object with
the start point
(x0,y0)
and the
end point
(x1,y1)
.
createLinearGradient
(x0, y0, x1, y1)
var lg = context
.createLinearGradient
(0, 0, 300, 200);
createPattern
(image, repetition)
Creates a
CanvasPattern
that
can be used as a
fillStyle
or
strokeStyle
. The pattern
starts with the specified image
and then repeats according
to
repetition
. Options are
repeat
,
repeat-x
,
repeat-y
,
and
no-repeat
.
pattern = context
.createPattern(img,
"repeat");
context.fillStyle =
pattern;
createRadialGradient
(x0, y0, r0, x1,
y1, r1)
Creates a
RadialGradient
with the start circle at origin
(x0,y0)
with radius
r0
and the
end circle at origin
(x1,y1)
with
radius
r1
.
var rg = context
.createRadialGradient
(105,105,40,112,120,70);
The color or style applied on
an invocation of
fill()
. The
value can be a CSS color, a
CanvasGradient
as created
by
createRadialGradient()
and
createLinearGradient()
, or
a
CanvasPattern
as created
by
createPattern()
. The
default fill style is black.
fillStyle
context.fillStyle =
"rgb(166,42,42)";
strokeStyle
The color or style applied on the
invocation of
stroke()
. The
value can be a CSS color value,
a
CanvasGradient
as created
by
createRadialGradient()
and
createLinearGradient()
, or
a
CanvasPattern
as created
by
createPattern()
. The
default stroke style is black.
context.strokeStyle =
"rgba(218, 112, 214,
0.4)";
T
ABLE
3-15
canvas Color and Style Properties and Methods