Blog Design Development Mobile Inspiration CSS Javascript News Opinions Politics Menu

Canvas Cheat Sheet

HTML5 Canvas Cheat Sheet
HTML5 Canvas Text Font, Size, and Style Tutorial

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.

Demo