Web Programming with HTML5, CSS, and JavaScript

12.6 Drawing Arcs and Circles

Next up is how to draw arcs and circles in the canvas drawing area. So, what is an arc in geometry? It’s any curved line that does not connect at the ends. The arc method creates geometrical arcs, but it’s limited to creating arcs that could be part of a circle (where a circle is defined as a set of points that are equidistant from the circle’s center). And unlike a geometrical arc, the arc method’s arcs can be connected at the ends. If the ends are connected, what is the result called? A circle! So the arc method can create the partial or full perimeter of a circle.

Creating an Arc or Circle with the arc Method

Here’s the arc method’s syntax:

context.arc(x, y, radius, start-angle, end-angle, counterclockwise ...