Método arc

O método arc desenha um arco com centro em um ponto determinado, com um raio determinado. Este arco se tornará visível apenas se os métodos stroke ou fill forem aplicados. No primeiro caso, será um contorno, e no segundo - uma forma preenchida.

O último parâmetro opcional regula a direção do desenho. Ele aceita o valor true ou false. O valor true desenha o arco no sentido horário, e o valor false - no sentido anti-horário (padrão).

Você pode definir os ângulos inicial e final ao desenhar. Esses ângulos são medidos em radianos, não em graus. Para converter graus em radianos você pode usar a seguinte função:

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

Sintaxe

contexto.arc(x, y, raio, ângulo inicial, ângulo final, [sentido = false]);

Exemplo

Vamos desenhar uma circunferência:

<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;
}

Exemplo

Vamos desenhar meia circunferência:

<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;
}

Exemplo

Vamos desenhar um semicírculo (preenchemos o contorno com 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;
}

Veja também

método rect,
que desenha um retângulo