Canvas Circles
The arc() method draws both full circles and partial arcs from a center point, a radius, and a pair of angles measured in radians.
Drawing Circles with arc()
Canvas has no dedicated circle() method — instead, every circular shape is drawn with arc(x, y, radius, startAngle, endAngle, counterclockwise). The first two arguments place the center of the circle, radius sets its size in pixels, and startAngle/endAngle define how much of the circle's circumference gets traced. The optional final boolean flips the drawing direction from the default clockwise to counterclockwise.
Angles Are in Radians, Not Degrees
arc() always expects radians. A full turn around a circle is 2 * Math.PI radians, a half turn is Math.PI, and a quarter turn is Math.PI / 2. To convert a degree value you already know, multiply it by Math.PI / 180. Getting this wrong is one of the most common Canvas mistakes — passing 360 instead of 2 * Math.PI draws an arc that sweeps around the circle nearly 58 times over, which can visually look identical to a full circle but is easy to get subtly wrong when you only want part of it.
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas>
<script>
const ctx = document.getElementById('scene').getContext('2d');
ctx.beginPath();
ctx.arc(100, 100, 60, 0, Math.PI * 2);
ctx.fillStyle = '#3b82f6';
ctx.fill();
ctx.strokeStyle = '#1e3a8a';
ctx.lineWidth = 3;
ctx.stroke();
</script>
</body>
</html>Full Circles vs. Partial Arcs
A full circle simply spans startAngle 0 to endAngle 2 * Math.PI (or any range covering a full turn). A partial arc uses a smaller range and draws only that slice of the circumference — stroke() on its own just curves between the two angles, leaving the shape open like a bracket. To turn a partial arc into a solid pie-slice or pac-man shape, move to the center point with moveTo() before calling arc(), then closePath() after it so the two straight edges connecting the center to each end of the arc get drawn.
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas>
<script>
const ctx = document.getElementById('scene').getContext('2d');
const cx = 100, cy = 100, r = 70;
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.arc(cx, cy, r, 0.25 * Math.PI, 1.75 * Math.PI);
ctx.closePath();
ctx.fillStyle = '#facc15';
ctx.fill();
</script>
</body>
</html>- arc(x, y, radius, startAngle, endAngle) is the only way Canvas draws circles
- Angles are always in radians: multiply degrees by Math.PI / 180 to convert
- 0 radians points to the three o'clock position; angles increase clockwise by default
- A full circle needs a 2 * Math.PI range between startAngle and endAngle
- moveTo(x, y) plus arc() plus closePath() turns a partial arc into a solid wedge
Example
<!DOCTYPE html>
<html>
<body>
<canvas id="scene" width="300" height="200" style="border:1px solid #ccc;"></canvas>
<script>
const ctx = document.getElementById('scene').getContext('2d');
// Face
ctx.beginPath();
ctx.arc(100, 100, 80, 0, Math.PI * 2);
ctx.fillStyle = '#fde047';
ctx.fill();
ctx.strokeStyle = '#78350f';
ctx.lineWidth = 3;
ctx.stroke();
// Eyes
ctx.beginPath();
ctx.arc(75, 80, 8, 0, Math.PI * 2);
ctx.arc(125, 80, 8, 0, Math.PI * 2);
ctx.fillStyle = '#78350f';
ctx.fill();
// Smile (partial arc)
ctx.beginPath();
ctx.arc(100, 100, 45, 0.1 * Math.PI, 0.9 * Math.PI);
ctx.strokeStyle = '#78350f';
ctx.lineWidth = 5;
ctx.stroke();
</script>
</body>
</html>Exercise: Canvas Circles
Which method is used to draw a circle or circular arc on canvas?
