The arguments that canvas arc takes for the start and stop angles should be in radians and not degrees. The concept of a radian is thinking of angles in terms of the value of pi times two rather than 360 degrees. If you prefer to think in degrees you will still want to know how to convert from degrees to radians as well as the inversion of that.
To convert a degree value to a radian value to be used with the canvas arc method just divide the degree value by 180 and then multiply that value by Math.PI to get the equivalent value in radians. Degrees can be obtained by dividing 180 by Math.PI and then multiplying that by the radian value. In any case it is just knowing what the relationship is to Math.PI.
The canvas arc method takes up to six arguments. The first two arguments given to the arc method set the center x and center y values of the arc. The third argument is the radius of the arc from that center point set with the first two arguments, and then the next two arguments after that is the beginning and ending angle in radians. The last optional argument is used to set clockwise of counter clockwise direction of the arc between the start and ending angles of the arc, in other words drawing a pac man like shape or a wedge like shape that will fit in pac mans mouth.
The canvas arc method can be used in conjunction with other line methods such as ctx.lineTo, more on that later. There is also the ctx.stroke, and ctx.fill methods and setting the style of lines and fills as well that you should be familiar with as well, but I do not want to get to far of base when it comes to drawing in general with canvas.
So the canvas arc method will come in handy for most situations when it comes to drawing arcs, and circles in canvas. It is a nice native built in way to draw arcs in the 2d canvas drawing api, a task that does come up often when making a canvas project. However there is also using the Math.cos and Math.sin methods in combination with canvas methods like moveTo, lineTo, in place of the native canvas arc method. If for some reason you want better control over the drawing of arc like curves in canvas, and feel compelled to write your own solution for drawing arcs, or something to that effect, you might want to play around with those methods a little as well.
So now that you know the basics of the canvas arc method, as well as other options for drawing arcs in canvas. Lets look at some more canvas code examples that have to do with this subject.
To draw a full circle with the canvas arc method just set radian values from zero to Math.Pi * 2, apart from the usual values that set the center point an radius. The angular direction of the arc is of little consequence as long as the proper values for the starting and ending radian are set of course.
This is a much quicker option to taking the time to write a polygon method to draw a circle, although writing that kind of method would give a greater deal of control over various other factors such as the number of sides that will compose the so called circle when it comes to daring a circle in canvas.
This works fine in most cases when I just want to quickly draw a circle. However there might be a desire in some cases to set other values such as the number of points in the arc and so forth. In that case I might need to take the time to write my own method for drawing an arc, or fine something else.
The sixth argument that can be passed to the canvas arc method is used to set clockwise or counter clockwise direction of the drawing of the canvas arc. The default value for this argument is false for a counter clockwise direction resulting in a clockwise direction from the starting radian to the ending radian value. This can be used in conjunction with proper values for the start and end radian values to do things like drawing a shape that looks like an eaten watermelon slice for example.
More than one instance of the canvas arc method can be used, and the canvas arc method can be used in conjunction with other line methods such as lineTo and close path as a way to draw shapes.
Drawing both chords and just plain arcs can be achieved with the canvas arc method by just simply including or excluding the closePath context method. The close path method will draw the final line back to the starting point, while not calling it will not do that of course.
For example in just about all use case examples of the canvas arc method I am using the method to draw a circle. So why not make a method where there are some defaults for arguments that make the starting radian value zero, and the ending radian value the value of pi times two. This way I do not have to do so each time I call the canvas arc method, and if I need to I can still pass different values for the starting and ending radian.
The general point is that just because there is a native method that does not mean that is what must always be what is used in a project. If I can still rationalize a reason to write my own method to do something natively, or in this case wrap a native method so that I can have control over default values and more, I might very well just do that.
It is fun to write these kind of methods now and then to gain a better degree of control over how the arc, or circle is drawn. Many canvas libraries have a polygon method built in, but with plain vanilla js it is not to hard to start to get together some methods for drawing a polygon with a set number or points.
This method can only be used to draw a circle, rather than say a half circle as I have choses to omit arguments for a start and end radian, and direction. It is true that writing a clone of the canvas arc method would not to be to hard, but doing so would not make sense, unless there are some additional features to add, such as being able to set the number of sides in the canvas arc.
In this canvas animation example I am updating two variables that have to do with changing the starting and ending radian values when calling the canvas arc method in a draw method that is called on each frame tick.
The basic structure of a canvas animation or any kind of canvas project will likely include at least some kind of state that is updated on each frame tick, and a method that draws that state to the canvas. There are other ways of course that involve clumping everything together, developers do have all kinds of different coding styles when it comes to making a project after all. However I think it is a good idea to make at least some kind of effort to break things down when I start to get into something that is a little advanced.
In the canvas animations update method I am updating the state of the animation based on the current frame value relative to the total frame count that I have set, and then I also step the frame count. In the draw method of the animation I then use the canvas arc method with the startRad and endRad values that are updated in the update method. I then have a main loop method in which I am updating and drawing this canvas animation.
When it comes to making cool little canvas projects like this I often do find myself moving things in arc like patterns. There is using the native canvas arc method to draw arcs, but if I want to just pan things out in an arc, and move them in an arc like fashion then I do of course need to write my own method for doing so often using the Math.cos, and Math.sin methods to do so.
So for this animation example that I started working out I am just using canvas arc as a way to track the movement of my points as I work out the expressions, logic, and structure of the animation. Compared to the previous animation examples I am now separating things into a state object, and having everything that has to do with rendering including the use of the canvas arc method outside the body of that state object.
I often do just use the canvas arc method as a way to just track the movement of points by just keeping the radius of the circle very small. I find doing so quick and easy compared to drawing two lines, and also like it over using the stroke rect method.