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

@sydnie 

Для того, чтобы нарисовать прямоугольник на Canvas, нужно использовать метод rect(). Он принимает 4 аргумента: координаты верхнего левого угла, ширину и высоту прямоугольника.

Вот пример кода:

1

1
2
3
4
5
6
7

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");

// координаты верхнего левого угла: x=10, y=10
// ширина: 100, высота: 50
ctx.rect(10, 10, 100, 50);
ctx.stroke(); // рисуем только контур прямоугольника

Этот код нарисует прямоугольник размером 100х50 пикселей, начинающийся в левом верхнем углу canvas с координатами (10, 10). ctx.stroke() используется для отрисовки только контура прямоугольника, чтобы он не был закрашен. Если вы хотите закрасить прямоугольник, используйте метод ctx.fillRect().