# The arcTo function

*Share RGraph:*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 tangents 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
- The radius

## An example

```
<script>
window.onload = function ()
{
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>
```

There's also an interactive of the arcTo function here.
## A rectangle with rounded corners

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,0,width,height, Math.min(height / 2, radius)); this.arcTo(width, height, 0, height, Math.min(width / 2, radius)); this.arcTo(0, height, 0, 0, Math.min(height / 2, radius)); this.arcTo(0, 0, radius, 0, Math.min(width / 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(); } window.onload = function () { // 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>

**See also**

An interactive example of the arcTo function

This interactive example will help you understand how the arcTo function works.