How To Make A Circle 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, draw clockwise or counterclockwise direction.

The direction parameter takes the following values: true makes it draw clockwise, false counterclockwise (the default).

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

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

Let’s draw a 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(360));
ctx.stroke();

The result of running the code:

Draw 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.stroke();

The result of running the code:

Drawing half of a 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(); // paint the path

Code result: