How to draw a circle sector on an html5 canvas?

html canvas geometry geometric-arc sector
dsavi picture dsavi · Jun 3, 2011 · Viewed 20.8k times · Source

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)

Answer

MartinStettner picture MartinStettner · Jun 3, 2011

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.

Related questions

How to draw a blurry circle on HTML5 canvas?

I'm able to draw a simple circle on HTML5 canvas, but I'd like to add some blur around it. What I found was this website which explains the shadowBlur property which can come in handy here. However, I cannot manage …

Read More
How to clear the canvas for redrawing

After experimenting with composite operations and drawing images on the canvas I'm now trying to remove images and compositing. How do I do this? I need to clear the canvas for redrawing other images; this can go on for a …

Read More
Capture HTML Canvas as gif/jpg/png/pdf?

Is it possible to capture or print what's displayed in an html canvas as an image or pdf? I'd like to generate an image via canvas, and be able to generate a png from that image.

Read More