# The arc function

The `arc` function is used whilst drawing paths to the `canvas` to draw a circle or a partial circle to the `canvas`.

## Arguments to the function

• The X coordinate (of the center point)
• The Y coordinate (of the center point)
• The radius of the arc/circle
• The angle to start drawing 1
• The angle to stop drawing at 1
• A boolean indicating the direction to draw. `true` is anti-clockwise, `false` is clockwise

1 Angles are measured in `radians` - not `degrees`. 1 `radian` is equal to `(180 / Math.PI)` degrees.

## An example

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

context.beginPath();

// This draws a whole circle to the canvas
context.arc(125, 125, 100, 0, Math.PI * 2, false);

context.stroke();
}
</script>
```

## How to draw a donut shape

At first, drawing a donut shape (a circle with a hole in the middle) isn't too taxing - just draw two circles, one smaller than the other which is coloured white. And you can indeed do this, but if you have anything at the back of the two filled circles then it won't show through.

There is a solution to this though and that's to draw the inner circle that has the smaller radius in an anti-clockwise direction. This way just the space between the two circles is filled.

In this example the `canvas` is first filled with a background colour and then the donut is drawn. As you can see, the background colour shows through the middle-hole after the donut is drawn.

```<script>
// Get the context
context = document.getElementById('cvs2').getContext('2d');

// Fill the whole canvas with a gray colour
context.fillStyle = '#ddd';
context.fillRect(0,0,300,300);

// Start a new path
context.beginPath();

// Draw a circle with a radius of 100 in the
// clockwise direction
context.arc(150,150,100,0, 2 * Math.PI, false);

// Now draw another circle with a smaller
// radius and in the anti-clockwise direction
context.arc(150,150,60,2 * Math.PI, 0, true);

// Fill the resultant shape
context.fillStyle = 'black';
context.fill();
</script>
```