# The arcTo function

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.arcTo(200,50,200,200,25);
context.lineTo(200,200);
context.stroke();
}
</script>
```

## A rectangle with rounded corners

This is an example of using the `arcTo` function 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>
```