CanvasRenderingContext2D.lineTo() - малює нову точку і з'єдює з останьою.
ctx.lineTo(x, y);
ctx - об'єкт CanvasRenderingContext2D.
x - точка осі X.
y - точка осі Y.
lineTo() метод об'єкту CanvasRenderingContext2D який додає нову точку в контурі і з'єднює її з останьою точкою прямою лінією на полотні canvas.
Щоб задати початкову точку контура використовуйте метод moveTo().
Зверніть увагу що спочатку задаються контури точок а потім контури малюються або замальовується методами stroke(), fill().
Необхідно створювати нові контури щоб контури не замикалися за доромогою beginPath() і closePath().
var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");
crt.moveTo(10, 10);
crt.lineTo(50, 50);
crt.strokeStyle='red';
crt.stroke();
var canvas= document.getElementById("canvas");
crt = canvas.getContext("2d");
crt.moveTo(12, 20);
crt.lineTo(90, 55);
crt.lineTo(25,40);
crt.fill();
Малюємо 3 лінія різного кольору:
var canvas= document.getElementById("canvas2");
crt = canvas.getContext("2d");
crt.beginPath(); //створюємо новий контур
crt.moveTo(10, 10);
crt.lineTo(50, 10);
crt.strokeStyle='red';
crt.stroke(); //обмальовуємо контур
crt.beginPath(); //створюємо новий контур
crt.moveTo(0, 30);
crt.lineTo(90, 90);
crt.strokeStyle='blue';
crt.stroke(); //обмальовуємо контур
crt.beginPath(); //створюємо новий контур
crt.moveTo(0, 90);
crt.lineTo(190, 90);
crt.strokeStyle='black';
crt.stroke(); //обмальовуємо контур