Arcs and Circles
Circles and curves can be drawn on the canvas using the 2D rendering context's arc() or arcTo() methods within a path block.
| Method | Description |
|---|---|
arc(x, y, radius, startAngle, endAngle, counterclockwise) |
Draws an arc centered at (x, y) with a specified radius. The arc starts and ends at the specified angles (in radians). The optional counterclockwise parameter is a boolean (default is false). |
arcTo(x1, y1, x2, y2, radius) |
Draws an arc with a specified radius and control points, connected to the previous point with a straight line. |
Radians and Angles
The arc() method uses radians rather than degrees. A full circle is 2π radians (approximately 6.28), and a half circle is π radians (approximately 3.14). Positive x-axis (right) is 0 radians.
You can convert degrees to radians using this formula:
Circle and Arc Example
This example draws a solid circle and a half-circle on the canvas:
Rounded Corners with arcTo()
The arcTo() method is useful for creating shapes with rounded corners by defining two control points and a radius:
Curves like waves and complex organic shapes require Bezier curves. The next lesson explains how to implement those.