javascript canvas как нарисовать круг, дугу

API интерфейс Canvas позволяет нарисовать круг.

context.arc (x,y, radius, startAngel, endAngel, direction);

где:

startAngel - угол между осью Х и начальной точкой дуги по часовой стрелки (и 'минус' против часовой)

endAngel - конечный угол между осью Х и конечной точкой дуги

direction принимает true если хотите чертить дугу против часовой стрелки, и false по часовой.

Вот пример js кода:

// создаем новый канвас через джаваскрипт	
        var canvas = document.createElement ("CANVAS");
	var main = document.getElementsByTagName ("body")[0]; 
	main.appendChild (canvas);
	canvas.setAttribute ("id", "draw");	
	canvas.setAttribute ("width", "600");	
	canvas.setAttribute ("height", "300");	
	var context = canvas.getContext ("2d");
	
// начинаем рисовать круг 
	context.beginPath();
	context.arc (100,100,74, 0, degreesToRadians(360),false);
       
// если добавить context.stroke(); то круг будет с черным ободом
// мы можем заполнить его цветом, либо не заполнять а только нарисовать его контур
// для этого вместо fillStyle нужно прописать context.lineWidth=1; context.stroke(); 
	context.fillStyle = "blue";
	context.fill();
// функция для переделки градусов в радианы
function degreesToRadians(g){
  return (g * Math.PI) / 180;

Если задавать разные углы, можно получить часть круга:

context.arc (100,100,74, 0, degreesToRadians(260),false);