Метод arc рисует дугу с центром в заданной точке, заданным радиусом. Видимой эта дуга станет, только если применить методы stroke или fill. В первом случае будет контур, а во втором - фигура.

Последний необязательный параметр регулирует направление рисования. Он принимает значение true или false, true по часовой стрелке, false против часовой (по умолчанию).

Можно задать начальный и конечный углы при рисовании. Эти углы измеряются в радианах, не в градусах. Для перевода градусов в радианы вы можете использовать следующую функцию:

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

См. также метод moveTo, который перемещает перо для рисования, ничего при этом не рисуя.

См. также учебник по canvas для более полного понимания.

Синтаксис

контекст.arc(x, y, радиус, начальный угол, конечный угол, [направление = false]);

Примеры

Пример

Давайте нарисуем окружность:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

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

Результат выполнения кода:

Пример

Давайте нарисуем половинку окружности:

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

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

Результат выполнения кода:

Пример

Давайте нарисуем половинку круга (закрасим контур с помощью fill):

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');

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

Результат выполнения кода: