Как нарисовать многоугольник на Canvas?

@gage 

Для рисования многоугольников на HTML Canvas необходимо следовать следующему алгоритму:

1. Создайте новый объект Canvas и получите контекст рисования (2D);
2. Определите координаты вершин многоугольника;
3. Используя метод beginPath(), начните новый путь рисования;
4. Используя метод moveTo(), переместите перо к первой вершине многоугольника;
5. Используя метод lineTo(), нарисуйте линии от первой вершины к остальным;
6. Используя метод closePath(), закройте путь рисования;
7. Используя метод stroke() или fill(), нарисуйте контур или заливку многоугольника соответственно.

Пример кода:

1
2
3
4
5
6
7
8

ctx.beginPath();
ctx.moveTo(100, 100);
ctx.lineTo(200, 100);
ctx.lineTo(200, 200);
ctx.lineTo(150, 250);
ctx.lineTo(100, 200);
ctx.closePath();
ctx.stroke();

Этот код нарисует пятиугольник, состоящий из пяти точек, расположенных в форме пятиугольника.