Método arc

El método arc dibuja un arco con centro en un punto dado, con un radio dado. Este arco se volverá visible solo si se aplican los métodos stroke o fill. En el primer caso será un contorno, y en el segundo - una figura.

El último parámetro opcional regula la dirección del dibujo. Acepta un valor true o false. El valor true dibuja el arco en el sentido de las agujas del reloj, y el valor false - en sentido contrario a las agujas del reloj (por defecto).

Se pueden especificar los ángulos inicial y final al dibujar. Estos ángulos se miden en radianes, no en grados. Para convertir grados a radianes puede usar la siguiente función:

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

Sintaxis

contexto.arc(x, y, radio, ángulo inicial, ángulo final, [dirección = false]);

Ejemplo

Dibujemos una circunferencia:

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

Ejemplo

Dibujemos media circunferencia:

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

Ejemplo

Dibujemos medio círculo (rellenemos el contorno con 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;
}

Véase también

método rect,
que dibuja un rectángulo