CanvasRenderingContext2D.quadraticCurveTo() - малює квадратичную криву Безьє.
ctx.quadraticCurveTo( cp1x, cp1y, cp2x, cp2y, х, у );
ctx - об'єкт CanvasRenderingContext2D.
cp1x - ось х координати для першої контрольної точки.
cp1y - ось у координати для першої контрольної точки.
cp2x - ось х координати для другої контрольної точки.
cp2y - ось у координати для другої контрольної точки.
x - осі х координати кінцевої точки.
y - ось у координати кінцевої точки.
quadraticCurveTo() метод об'єкту CanvasRenderingContext2D додає квадратичную криву Безьє до полотна canvas.
Щоб задати початкову точку використовуйте метод moveTo().
var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");
crt.moveTo(101, 120);
crt.quadraticCurveTo(120, 45, 90, 55);
crt.strokeStyle="#a800ff";
crt.stroke();
var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");
crt.beginPath(); //новий контур
crt.moveTo(15, 5);
crt.quadraticCurveTo(70, 110, 105, 40);
crt.fillStyle="#11a0a2";
crt.closePath();
crt.fill();