Canvas Arcs
arc(x, y, radius, startAngle, endAngle) draws a circular arc. Angles are in radians. A full circle goes from 0 to Math.PI * 2.
HTML
Beginner
5 min read
Drawing Circles and Arcs
Example
const ctx = canvas.getContext("2d");
// Full circle
ctx.beginPath();
ctx.arc(150, 150, 80, 0, Math.PI * 2);
ctx.fillStyle = "#28a745";
ctx.fill();
// Half circle (pie)
ctx.beginPath();
ctx.arc(350, 150, 80, 0, Math.PI);
ctx.closePath();
ctx.fillStyle = "#dc3545";
ctx.fill();
// Convert degrees: angle * Math.PI / 180 Pro Tip
Degrees to radians: multiply by Math.PI/180. A right angle is Math.PI/2, a full circle is Math.PI*2.