Drawing circles in a JavaScript HTML5 Canvas element

The arc() method is the native way to draw circles in a canvas element.  The method takes 6 parameters:

cxt.arc(x, y, radius, start, end, direction)

Where 

  • x = x coordinate for the center of the circle
  • y = y coordinate for the center of the circle
  • radius = radius of circle
  • start = starting angle for the arc in radians
  • end = ending angle for the arc in radians
  • direction = true for counter clockwise and false for clockwise


As with the control points for biezer and quadratic curves, the start and end arc angles can be difficult to visualize, especially for people who are not used to thinking about radians. The illustration at the top of this page shows how changing the parameters passed into the arc() effect the arc drawn. The code needed to render the arc is also given.