An interactive example of the canvas arcTo function

Recommend RGraph:  
    Read comments... Posted on 10th April 2014

Summary
This is an interactive example of the canvas arcTo function that you use to see just how this (rather confusing) function works

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.


    
    
[No canvas support]

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:

An example image explaining the arcTo function

Browser support

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.

Your browser:


Chrome:
Yes
Firefox:
Yes
Internet Explorer:
Yes
Safari:
Yes
Opera:
Yes1

`1 Previous versions of Opera implemented this function wrongly. Recent versions produce the same results as other browsers.

Comments