HTML and CSS Reference
In-Depth Information
Name
Description
Example
Clears the pixels of the specified rectangle
with starting point
(x,y)
and width
w
and
height
h
.
clearRect
(x, y, w, h)
context.fillRect
(100, 100, 100, 100);
context.clearRect(125,
125, 50, 50);
fillRect
(x, y, w, h)
Fills the rectangle defined by the starting
point
(x,y)
and the width
w
and height
h
.
Uses the
fillStyle
to determine how the
fill should appear.
context.fillRect
(100, 100, 100, 100);
Draws the outline for the rectangle defined
by the starting point
(x,y)
and the
width
w
and height
h
. Uses
lineWidth
,
lineCap
,
lineJoin
,
miterLimit
, and
strokeStyle
to determine how the stroke
should appear.
strokeRect
(x, y, w, h)
context.strokeRect
(50, 100, 200, 100);
T
ABLE
3-18
canvas Rectangle Methods
Name
Description
Example
Draws an arc between two
points that has an origin set
to
(x,y)
and a radius set as
defined by
radius
. The start
point is defined as the point
on the arc where the angle is
startAngle
, and the end
point is the point on the arc
where the angle is
endAngle
.
The actual arc is drawn along
the circumference between the
two points either clockwise or
counterclockwise depending on
the setting.
arc (x, y, radius,
startAngle, endAngle,
anticlockwise)
context.arc(115,120,5,0,
Math.PI*2,true);
arcTo (x1, y1, x2,
y2, radius)
Draws an arc with the radius
radius
and that goes
between two points that are
determined by getting tangent
points on two lines. The first
line is drawn from the last
point in the subpath to
(x1,
y1)
. The second line is drawn
from
(x1, y1)
to
(x2, y2)
.
context.moveTo(80, 50);
context.arcTo(250, 50,
250, 250, 30);
T
ABLE
3-19
canvas Path API Methods
