# 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:

• 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()` function. You don't specify this point.
• P1 (left hand side ) is the first point 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.

## 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.

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.