CanvasRenderingContext2D.arcTo() - малює дугу до між двома точки.
ctx.arcTo( x1, y1, x2, y2, radius );
ctx - об'єкт CanvasRenderingContext2D.
x1 - координати першої точки осі х.
y1 - координати першої точки ось у.
x2 - координати другої точки осі х.
y2 - координати другої точки ось у.
radius - радіус кола.
arcTo() метод об'єкту CanvasRenderingContext2D який додає контури дуги яке домальовується між двома точками на полотні canvas.
Щоб задати початкову точку дуги використовуйте метод moveTo().
Щоб намалювати або замалювати контури дуги використовуйте методи stroke(), fill().
var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");
crt.beginPath();
crt.moveTo(20, 20); //задаємо початкову точку
crt.arcTo(80, 20, 130, 200, 90); //задаємо контури дуги
crt.lineWidth=5;
crt.strokeStyle="black";
crt.stroke(); //малюємо контури
var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");
crt.beginPath(); //створюємо новий контур
crt.moveTo(175, 10);
crt.arcTo(20, 50, 120, 130, 60);
crt.closePath(); //закриваємо контур
crt.strokeStyle="blue";
crt.stroke();