Menu
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)
843
The arc() method creates an arc/curve (used to create circles, or parts of circles). Tip: To create a circle with arc(): Set start angle to 0 and end angle to 2*Math. PI. Tip: Use the stroke() or the fill() method to actually draw the arc on the canvas.
To draw arcs or circles, we use the arc() or arcTo() methods.
arc Method: arc(x, y, radius, startAngle, endAngle, direction) The x-coordinate (in pixels), for the center point of the arc in relation to the upper-left corner of the canvas rectangle. The y-coordinate ( in pixels), for the center point of the arc in relation to the upper-left corner of the canvas rectangle.
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.
138
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
