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

@lilla.herman 

Для того чтобы нарисовать прямоугольник на Canvas с помощью JavaScript, следует использовать методы:

• beginPath() - начать отрисовку нового пути
• rect(x, y, width, height) - добавить прямоугольник в путь на заданных координатах и с указанными размерами
• stroke() - нарисовать контур прямоугольника

Ниже приведен пример кода, который рисует прямоугольник с размерами 100x50 пикселей и координатами x=50, y=50 на Canvas с id="myCanvas":

1
2
3
4
5
6

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

ctx.beginPath();
ctx.rect(50, 50, 100, 50);
ctx.stroke();

Метод fill() может быть также применен для заполнения прямоугольника цветом. Он должен быть вызван после метода rect() и до метода stroke() вместо последнего.