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

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

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

В этом методе xи yуказывают координаты верхнего левого угла прямоугольника, а ширинуи heightукажите размеры прямоугольника.

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

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

Подобно методу fillRect, метод strokeRectрисует контур прямоугольника, а не заполняет его.

Метод 3. Использование методов beginPath, rectи fill

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.rect(x, y, width, height);
ctx.fillStyle = 'color';
ctx.fill();

Этот метод обеспечивает большую гибкость, позволяя указать цвет прямоугольника с помощью fillStyle.

Метод 4. Использование метода createLinearGradient

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createLinearGradient(x, y, x + width, y + height);
gradient.addColorStop(0, 'color1');
gradient.addColorStop(1, 'color2');
ctx.fillStyle = gradient;
ctx.fillRect(x, y, width, height);

Этот метод создает эффект градиента внутри прямоугольника, указывая два цвета (color1и color2) и используя метод createLinearGradient.

Метод 5. Использование метода createRadialGradient

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const gradient = ctx.createRadialGradient(x, y, radius, x, y, radius + width);
gradient.addColorStop(0, 'color1');
gradient.addColorStop(1, 'color2');
ctx.fillStyle = gradient;
ctx.fillRect(x, y, width, height);

Этот метод создает эффект радиального градиента внутри прямоугольника, указывая два цвета (color1и color2) и используя метод createRadialGradient.