How to draw a circle sector on an html5 canvas?

Question

I'm trying to make a sort of pie-chart shape on a canvas element, however I can't seem to find any function that does this by itself. I only seem to be able to draw full circles and segments. Is there an easy way to do this?

(See also: Wikipedia on circle terminology)

score 39 · Accepted Answer · answered Jun 03 '11 at 17:18

39

The following should work:

context.moveTo(cx,cy);
context.arc(cx,cy,radius,startangle,endangle);
context.lineTo(cx,cy);
context.stroke(); // or context.fill()

with cx, cy being the center of the arc.

answered Jun 03 '11 at 17:18

MartinStettner

28,719
15
79
106

11

Martin has the right idea, here's a working example if you're really lost: http://jsfiddle.net/3VB68/ – Simon Sarris Jun 03 '11 at 17:26
1

Just a FYI, angles are in radians here. – chipmunk Sep 30 '14 at 18:41
What about `context.beginPath()` / `context.closePath()` ? Some stuff like `clearRect()` will stop working without them – tigrou Jun 13 '17 at 13:34

How to draw a circle sector on an html5 canvas?

1 Answers1

Linked