HTML and CSS Reference
In-Depth Information
Name
Description
Example
beginPath()
Sets the subpath list to 0. Any
paths set and undrawn at this
point will not be displayed.
context.beginPath();
bezierCurveTo
(cp1x, cp1y, cp2x,
cp2y, x, y)
Connects the last point in
the subpath to
(x,y)
using
(cp1x, cp1y)
and
(cp2x,
cp2y)
as control points for a
cubic Bézier curve.
context.moveTo(50,50);
context.bezierCurveTo(65,
25, 85, 25, 100, 50);
clip()
Creates a new clipping region
by intersecting the current
clipping region with the area
defined in the current path.
context
.arc(150,150,100,0,Math
.PI*2,true);
context.clip();
closePath()
Closes the last subpath and
creates a new subpath that
has the previous subpath's
last point as its first point.
context.closePath();
Fills any open subpaths and
then closes them. Uses the
fillStyle
to determine how
the fill should appear.
fill()
context.lineTo(100,100);
context.lineTo(0,200);
context.lineTo(100,300);
context.fill();
lineTo(x, y)
Draws a line from the last point
in the subpath to the point
defined by
(x, y)
.
context.lineTo(100,100);
moveTo(x, y)
Creates a new subpath with
the point
(x, y)
added to it.
context.moveTo(150,50);
quadraticCurveTo
(cpx, cpy, x, y)
Connects the last point in
the subpath to
(x,y)
using
(cpx, cpy)
as the control
point for a quadratic Bézier
curve.
context.moveTo(50,150);
context
.quadraticCurveTo(125,
225, 200, 150);
Creates a new subpath
containing the rectangle
defined by starting point
(x,
y)
with width
w
and height
h
.
rect (x, y, w, h)
context.rect (50, 50, 100,
100);
stroke()
Draws the strokes of the
current path and display based
on the settings specified
by
lineWidth
,
lineCap
,
lineJoin
,
miterLimit
, and
strokeStyle
.
context.moveTo(50, 250);
context.lineTo(0, 200);
context.lineTo(50, 150);
context.lineTo(0,100);
context.lineTo(50, 50);
context.stroke();
T
ABLE
3-19
canvas Path API Methods (continued)
