How to draw circles and arcs in HTML Canvas

Overview

canvas has APIs to draw circles and arcs:

  • arc(x, y, radius, startAngle, endAngle, anticlockwise): Draws an arc that is centered at (x, y) position with radius r starting at startAngle and ending at endAngle, going in the given direction indicated by anticlockwise (defaulting to clockwise).

  • arcTo(x1, y1, x2, y2, radius): Draws an arc with the given control points and radius, connected to the previous point by a straight line.

Note: The radius is in radians, not degrees. 180180 degrees should be converted to radians or the APIs will take it as 180180rads. We can convert degrees to radians with this algorithm: (radians=(Math.PI/180)degrees)(radians =(Math.PI/180)*degrees).

In the methods above, x,y,x1,y1x, y, x1, y1 are the center position of the circle/arc on the canvas grid. radius is the radius of the circle/arc. startAngle is the angle (in radians) where the drawing of the circle/arc will start. endAngle is the angle (in radians) where the tracing of the circle/arc would stop. antiClockWise is the direction of the circle/arc tracing. If antiClockWise is true, the circle/arc is drawn anti-clockwise; otherwise, clockwise.

Since the methods are all arcs, drawing a circle with them is a little tricky.

Example

const degToRad = (degrees) => (Math.PI / 180) * degrees

context.arc(100, 100, 50, degToRad(0), degToRad(360), true)
context.stroke()

This will draw a circle.

Explanation

We set the center of the circle to start at x,yx,y = (100,100)(100,100), with a radius of 5050. We set the starting angle at 00 degrees (we use the degToRag function to convert degrees to radians) and the stop angle at 360360 degrees to make the complete circle. Then, the argument true makes the code trace the circle from the anticlockwise direction. The stroke() method draws out the outline of the circle.

Examples

Let’s fill the circle through the fill method:

context.arc(100, 100, 50, degToRad(0), degToRad(360), true)
 context.fill()

We can draw an arc from 00 to 180180:

context.arc(100, 100, 50, degToRad(0), degToRad(180), true)
 context.stroke()

This will draw an arc:

This is because we start at angle 00 and stop at 180180. If we change 180180 to 360360, the code will draw a circle.

Now, let’s make a filled arc:

context.arc(100, 100, 50, degToRad(0), degToRad(180), true)
 context.fill()

.

Note: Please refer to the following shots for information related to this topic:
Drawing lines and paths
Drawing triangles
Filling paths
Drawing rectangles

Free Resources