An interactive example of the canvas arcTo functionPosted on 10th April 2014
The arcTo function is one of the least well understood functions that canvas has to offer - simply because of it's rather confusing output. Once you understand what its doing though - it gets easier to predict the output. As with most things. The interactive example below allows you to drag the points around and see the effect and the static picture below that has more information on what each bit is.
What is this function doing?
Seems kinda strange doesn't it? Keep in mind that the arcTo function is only concerned with drawing the arc. Imagine a circle if you will which has a radius the same as what you give the arcTo function. And then the circle is wedged between the triangular lines that are created using the P0, P1 and P2 points. The curve that you get from the edges of the circle that are touching the lines is what the arcTo function draws. The line that goes from P0 to the start of the arc is a byproduct - a joining line. The arcTo function doesn't explicitly draw this line - it's an implicit draw. The arcTo function is just concerned with drawing the arc - nothing more. Here's an annotated picture that explains more:
- P0 (bottom right corner) is given by the initial moveTo call.
- The line A is the connecting line that is drawn implicitly from P0 to the start of the curve.
- S is the start point of the arcTo. You don't specify this point.
- P1 (left hand side ) is the first point that that you give to the arcTo function (the X/Y coordinates)
- r is the radius that you give as the final argument to the arcTo function.
- E is the end of the arc that is produced by the arcTo function. You don't specify this point.
- The line B is the lineTo function that you give AFTER the arcTo function.
- P2 is the second point (X/Y coordinates) that you give to the arcTo function and is also used in the final lineTo function - the ending point.
The arcTo function is supported by all browsers that support canvas. At the time of writing though Opera has a seemingly incorrect implementation and produces significantly different output than the other browsers.
`1 Previous versions of Opera implemented this function wrongly. Recent versions produce the same results as other browsers.