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:

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

Drawing a circumference

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(360));
ctx.stroke();

Результат:

Drawing a half circumference

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.stroke();

Результат:

Drawing a half circle

html<canvas width="200" height="200" style="background: #f4f4f4;"></canvas>

javascriptlet canvas = document.querySelector('canvas');
let ctx = canvas.getContext('2d');

ctx.arc(100, 100, 75, 0, getRadians(180));
ctx.fill(); // fill a shape

Результат:

Practical tasks