Методы JavaScript для рисования квадрата на холсте

Чтобы нарисовать квадрат на холсте с помощью JavaScript, вы можете использовать различные методы. Вот несколько подходов:

Метод 1: использование метода fillRect()

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.fillRect(x, y, width, height);

Метод 2: использование метода strokeRect()

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.strokeRect(x, y, width, height);

Метод 3: использование beginPath(), moveTo(), lineTo()и closePath()методы

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.moveTo(x, y);
ctx.lineTo(x + width, y);
ctx.lineTo(x + width, y + height);
ctx.lineTo(x, y + height);
ctx.closePath();
ctx.fill(); // or ctx.stroke();

Во всех приведенных выше методах xи yпредставляют начальные координаты квадрата, а ширинаи высотаопределить размер квадрата.