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