# HTML5 Canvas Arc Tutorial

## Description

To create an arc with HTML5 Canvas, we can use the *arc()* method. Arcs are defined by a center point, a radius, a starting angle, an ending angle, and the drawing direction (either clockwise or anticlockwise). Arcs can be styled with the *lineWidth*, *strokeStyle*, and *lineCap* properties.

An arc is nothing more than a section of the circumference of an imaginary circle. This imaginary circle can be defined by *x*, *y*, and *radius*.

Next, we can define the arc itself with two points along the imaginary circle's circumference defined by *startAngle* and *endAngle*. These two angles are defined in radians and form imaginary lines that originate from the center of the circle and intersect the ends of the arc that we wish to create.

The final argument of the arc method is *antiClockwise* which defines the direction of the arc path between its two ending points. Unless otherwise specified, this argument is defaulted to false, which causes the arc to be drawn clockwise.

**Note:** Alternatively, we can also create an arc using the *arcTo()* method which is used for creating rounded corners in a path. Click here to read more.

Advertisement