# Drawing circles using canvas in JavaScript

The following `arc` method draws an arc centered at some point. It takes the following parameters: `x`, `y`, radius `r`, start angle `startAngle`, end angle `endAngle `, drawing clockwise or counterclockwise - `direction`.

The `direction` parameter takes the following values: `true` makes drawing clockwise, `false` - counterclockwise (by default).

The angles in the `arc` method are measured in radians, not degrees. To convert degrees to radians you can use the following function:

```function getRadians(degrees) { return (Math.PI / 180) * degrees; }```

## Drawing a circumference

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` ```let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 75, 0, getRadians(360)); ctx.stroke();```

:

## Drawing a half circumference

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` ```let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 75, 0, getRadians(180)); ctx.stroke();```

:

## Drawing a half circle

`<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>` ```let canvas = document.querySelector('canvas'); let ctx = canvas.getContext('2d'); ctx.arc(100, 100, 75, 0, getRadians(180)); ctx.fill(); // fill a shape```

: