CanvasRenderingContext2D.fillRect()

CanvasRenderingContext2D.fillRect() - малює зафарбований прямокутник.

Синтаксис:

ctx.fillRect(x, y, width, height);

Параметри:

ctx - об'єкт CanvasRenderingContext2D.

x - координати по осі x початкової точки прямокутника.

y - координати по осі y початкової точки прямокутника.

width - ширина прямямокутника.

height - висота прямокутника.

Опис:

fillRect() метод об'єкту CanvasRenderingContext2D який малює зафарбований прямокутник за вказаними координатами.

Прямокутник малюється використовуючи стиль CanvasRenderingContext2D.fillStyle.

Заокруглений прямокутник можна намалювати за допомогою roundRect() і fill().

Приклад:

var canvas = document.getElementById("canvas").getContext("2d");
canvas.fillStyle="blue";
canvas.fillRect(10, 8, 50, 67);

Замальовуєво canvas одним кольором:

var el = document.getElementById("canvas");
var canvas = el.getContext("2d");
canvas.fillStyle="#3e3d3d";
canvas.fillRect(0, 0, el.width, el.height);

<canvas id="myCanvas" width="400" height="200" style="border:1px solid black;"></canvas>

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

// Встановлюємо колір
ctx.fillStyle = "blue";
// Малюємо прямокутник
ctx.fillRect(50, 80, 170, 100);

//Малюємо червоний прямокутник
ctx.fillStyle = "red";
ctx.fillRect(10, 10, 100, 50);

//малюємо зелений прямокутник
ctx.fillStyle = "green";
ctx.fillRect(120, 10, 100, 50);


//малюємо помаранчевий прямокутник
ctx.fillStyle = "orange";
ctx.fillRect(230, 10, 100, 50);