tutorial for HTML canvas's arc function [closed]

Question

I can not figure out what all the parameters to the arc() function are (by experimentation) and I have not found any tutorial that seems to explain them. Where would a good explanation of the arc() function be?

Answer 1

arc(x, y, radius, startAngle, endAngle, anticlockwise)

The first three parameters, x and y and radius, describe a circle, the arc drawn will be part of that circle. startAngle and endAngle are where along the circle to start and stop drawing. 0 is east, Math.PI/2 is south, Math.PI is west, and Math.PI*3/2 is north. If anticlockwise is 1 then the direction of the arc is reversed.

https://developer.mozilla.org/En/Canvas_tutorial/Drawing_shapes#Arcs

In the attached diagrams, the only difference is the anticlockwise param. Math.PI/2 always ends south when clockwise or anticlockwise

Answer 2

For more information, please review the below link. I got a clear idea using this link.

http://www.html5canvastutorials.com/tutorials/html5-canvas-arcs/

Answer 3

I was having the same problem and made a little interactive page to help make sense of it:

http://www.scienceprimer.com/drawing-circles-javascript-html5-canvas-element

All of the parameters can be adjusted and the resulting arc is rendered in real time. The page also demonstrates how the fill(), stroke() and closePath() methods interact with the arc() method.

Answer 4

According to MDC:

arc(x, y, radius, startAngle, endAngle, anticlockwise)

x, y, and radius are obviously circle parameters. startAngle and endAngle are in radians, starting east. anticlockwise is a boolean.

Answer 5

Check this simple example for a brief introduction to canvas and arc function of HTML5: http://pastebin.com/kxB7uJLD

So long.