Как программно нарисовать треугольник на canvas в javascript?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

// Получаем элемент canvas по его id
var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// Задаем координаты трех вершин треугольника
var x1 = 100;
var y1 = 100;
var x2 = 200;
var y2 = 200;
var x3 = 300;
var y3 = 100;

// Начинаем новый путь
ctx.beginPath();

// Перемещаем перо в первую вершину треугольника
ctx.moveTo(x1, y1);

// Добавляем линии к двум оставшимся вершинам треугольника
ctx.lineTo(x2, y2);
ctx.lineTo(x3, y3);

// Закрываем путь, соединяя последнюю вершину с первой
ctx.closePath();

// Заливаем треугольник выбранным цветом
ctx.fillStyle = "blue";
ctx.fill();

// Рисуем контур треугольника
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.stroke();