Source: http://www.broad-network.com/ChrysanthusForcha-1/Drawing-Curves-in-HTML-Canvas.htm
Timestamp: 2019-04-19 02:38:12+00:00

Document:
Foreword: In this part of the series, I explain how to draw curves with little mathematical skills; the little math skills you need is taught to you.
This is part 3 of my series, HTML Canvas 2D Context. In this part of the series, I explain how to draw curves with little mathematical skills; the little math skills you need is taught to you. I assume you have read the previous parts of the series; this is a continuation.
An arc is part of a circle. Drawing an arc is similar to drawing a line, but this time, you do not really need the moveTo(x,y) method.
Consider a circle. Imagine a line from the center that goes horizontally to the right edge of the circle. Such a line is called the radius of the circle. If you rotate this line (in your mind) clockwise, by an angle, the angle at the center of the circle between the new and initial placement of the line, will be increasing. It can increase to 90 degrees, 180 degrees, 270 degrees and 360 degrees (complete cycle).
where (x,y) is the center of the circle, radius is the distance from the center of the circle to the edge of the circle, in pixels (without the units). startAngle is the arc start angle measured clockwise at the center of the circle and endAngle is the end arc angle measured clockwise at the center of the circle.
The angles are typed in radians, without the units. Zero degrees is zero radians. 90 degrees is approximately 1.57 radians; 180 degrees is approximately 3.14 radians; 270 degrees is approximately 4.71 radians; 360 degrees is approximately 6.28 radians. With these you should be able to estimate your angles in radians.
For the above arc, the center is above the arc. In order to appreciate what is really going on, you will need to do some practice on your own as follows: Go to the above code; keep values of the center and pair of angles fixed, then change the value of the radius several times to see the effect on the screen. Next keep the values of the radius and center fixed, then change the values of the pair of angles several times to see the effect on the screen. Finally, keep the values of the radius and pair of angles fixed and then change the value of the center coordinates several times to see the effect on the screen.
The arc method of the context object is useful for drawing an independent arc. The example above is a whole path on its own. Imagine that you have a straight-line path and you want to continue the path with an arc. In this case, you would use the arcTo method of the context object.
Example: In order to illustrate the use of the arcTo method, consider a straight line moving downward and to the left. Where this line ends, consider an arc that continues smoothly (aligning) from the end of the straight subpath, going downward and to the left and then upward, and ends just a bit higher up than its bottom. In order to explain how to draw such an arc I will first of all draw a V letter. The following code sample draws a V from right to left. Read and try it.
In this code the V is drawn in the opposite direction, from right to left; it still stands upright, as it should. The right-top corner of the V has coordinates, (260,20). The bottommost point of the V has coordinates, (180,120). The left-top corner of the V has coordinates, (100,20).
In the example described above, the straight line is the top half of the right arm of the V. The arc will sit smoothly (aligned) in the V. In the following code, the arc is drawn in red. Try the code. The explanation is given later.
You can clearly see in the display, how the arc sits comfortably (and aligned) in the V. In this code, the center of the circle, is above the bottommost point of the V.
Our task is to have a straight-line and have an arc continue smoothly from the end of the straight-line path. Try the following code, which better demonstrates this. The explanation is given after.
(x1,y1) are the coordinates of the bottommost point of the V. (x2,y2) are the coordinates of the right-top or left-top of the V, depending on which direction (moving) you are imagining (drawing) the V. In the above case, it is the left-top. radius is the radius of the circle, whose circumference the arc is a part. The arc is sitting comfortably (smoothly) in the V; and with that fact, you should be able to make a good estimate of the radius.
So, to draw an arc that continues a straight-line subpath, you need the coordinates of the corners of a V. The bottommost coordinates are (x1,y1) in the acrTo method. The coordinates of the start of the straight line are the same as the coordinates of one of the topmost points of the V; let these coordinates be (xi,yi) These coordinates are the values of the moveTo(x,y) method. The coordinates of the other topmost point of the V are the (x2,y2) values in the arcTo() method.
The V does not have to be standing upright as in the above situation. The V can point to any direction and the arc would still sit comfortably (and aligned) in it. The V does not also have to be symmetrical: that is one arm can rotate away from the center-line more than the other arm. Under this situation the arc would still sit comfortably (aligned) in the V. The arms of the V do not also have to be the same in length and you will still have a well-seated arc.
Always remember: The arcTo method will always elongate or even start the straight line before drawing the arc.
Always remember: The arcTo method will always elongate or even start the straight line before drawing the arc. The greater the radius of the circle, the higher up the arc is; the smaller the radius, the lower down the arc is.
The arc is one kind of curve. Another kind of curve is known as the quadratic curve. The quadratic curve looks like the complete drawing of the above code. However, the bottom part is not an arc; it is of a different curvature. Also, there are no straight lines for the quadratic curve. It is a curve all through, which curves, less at the top. Try the following code, which draws a quadratic curve on a V.
The quadratic curve does not have to be symmetrical; the arms do not also have to be of the same length.
Another kind of curve is called the Bezier curve. The following code shows two Vs and the Bezier Curve drawn on them. Two arms of the two Vs are the same. The first V is upright and the other is inverted. The drawing here as well as the drawing for all the curves in this tutorial are from right to left. Try the code - explanation is given later.
The new drawing teaching technique you find in this tutorial, is my innovation. Precisely, the use of the V to draw curves is my innovation. The canvas element is a new thing and I have come up with the use of the V to explain how to draw curves in the canvas.

References: V. 
 V. 
 V. 
 V.

 V. 
 V. 
 V. 
 V. 
 V.