An interactive example of the canvas arcTo() function

Written by Richard Heyes, on 10th April 2014

This is an interactive example of the canvas arcTo() function that you can 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 its rather confusing output. Once you understand what it's 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. The static picture below it has more information about what each bit is.

[No canvas support]

What is this function doing?

Seems rather strange doesn't it? Keep in mind that the arcTo() function is only concerned with drawing the arc. Imagine a circle which has a radius the same as that which 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 by-product - a connecting 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 the Opera browser has a seemingly incorrect implementation and produces significantly different output than other browsers.

Your browser:

Internet Explorer:

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