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

enru