arc method

The arc method draws an arc centered at a given point with a given radius. This arc will become visible only if you apply the stroke or fill methods. In the first case there will be a stroke, and in the second - a shape.

The last optional parameter controls the drawing direction. It takes the value true or false. The value true draws the arc clockwise, while the value false draws the arc counterclockwise (default).

You can set the start and end angles when drawing. These angles 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;
}

Syntax

context.arc(x, y, radius, start angle, end angle, [direction = false]);

Example

Let's draw a circumference:

<canvas id="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();

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

Example

Let's draw a half of a circumference:

<canvas id="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();

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

Example

Let's draw a half circle (fill in the outline with fill):

<canvas id="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();

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

arc method

Syntax

Example

Example

Example

See also