# The arcTo() function

The arcTo() function is a path function used when drawing circles or partial circles. It can also be used to draw curved-corner rectangles quite conveniently.

The `arcTo()` function is used whilst drawing paths to the canvas to draw a circle or a partial circle to the canvas. The function draws the arc created by two lines that are defined by the coordinates and radius given. Commonly the `arc()` function can be used as an alternative to this function.

## Arguments to the function

• The X1 coordinate
• The Y1 coordinate
• The X2 coordinate
• The X2 coordinate

## An example

```<script>
{
var canvas  = document.getElementById("cvs");
var context = canvas.getContext('2d');

context.beginPath();
context.moveTo(50,50);
context.moveTo(100,50);
context.arcTo(200,50,200,200,25);
context.stroke();
}
</script>
```

## A rectangle with rounded corners

[No canvas support]

This is an example of using the `arcTo()` function in order to make a rectangle with rounded corners. Simply include the function before you create the canvas 2D context and it will be there for you to make use of. It's just like the `rect()` function but with an extra argument that stipulates the size of the rounded corners.

```<script>
/**
* This adds a roundedRect(x, y, width, height, radius) function to the drawing
* context. The radius argument dictates how severe the corners are rounded.
*
* @param number x      The X coordinate
* @param number y      The Y coordinate
* @param number width  The width of the rectangle
* @param number height The height of the rectangle
* @param number radius The radius of the corners. Bigger values mean more rounded corners
*/
CanvasRenderingContext2D.prototype.roundedRect = function (x, y, width, height, radius)
{
// Because the function is added to the context prototype
// the 'this' variable is actually the context

// Save the existing state of the canvas so that it can be restored later
this.save();

// Translate to the given X/Y coordinates
this.translate(x, y);

// Move to the center of the top horizontal line
this.moveTo(width / 2,0);

// Draw the rounded corners. The connecting lines in between them are drawn automatically
this.arcTo(width, height, 0, height, Math.min(width / 2, radius));
this.arcTo(0, height, 0, 0, Math.min(height / 2, radius));

// Draw a line back to the start coordinates
this.lineTo(width / 2,0);

// Restore the state of the canvas to as it was before the save
this.restore();
}

{
// And you use it like this. First get the canvas and context as normal
var canvas  = document.getElementById('cvs')
var context = canvas.getContext('2d')

// Start a path and draw a rounded rectangle. The roundedRect() function can be likened to the rect() function
context.beginPath();
context.fillStyle = 'red';
context.roundedRect(5, 5, 100, 200, 15);
context.stroke();
context.fill();
}
</script>
```