Search within TutorialsPark

HTML5 Canvas Arcs


Use Canvas methods to draw arcs of different types and sizes.


Arc Method:arc(x, y, radius, startAngle, endAngle, direction)

HTML5 Canvas Arc Image

To draw an arc on the canvas use method arc(x, y, radius, startAngle, endAngle, direction) .

1.Here (x, y) denote the centre of the arc.

2.radius :denotes the radius of the arc.

3.startAngle: Denotes the angle where the arc should begin.

4.endAngle: Denotes the angle where the arc ends.

5.direction: Specifies the direction along which the arc is to be created.It has two options clockwise and anticlockwise, the default is clockwise.

Example:Arc using method arc().

Give it a TRY! » Exercise-Set the variable counterClockwise to false, to draw arc in clockwise direction.


Arc Method:arcTo(x1, y1, x2, y2, radius).

arcTo method circle and tangent

1.The method arcTo(x1, y1, x2, y2, radius) creates an arc between the two tangents to circle with given radius.

2.Here, (x1, y1) and (x2, y2) denote the two points along which arc is to be created.

3.A circle of given radius is drawn which intersects the lines at two points ( t1 and t2), which are joined to create the arc. See Figure above.

Example:Arc using arcTo method.

Give it a TRY! »



Related Examples

Related Tags