# 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`

:

## Practical tasks

←→
↑
en ru