CanvasRenderingContext2D.fillRect() - малює зафарбований прямокутник.
ctx.fillRect(x, y, width, height);
ctx - об'єкт CanvasRenderingContext2D.
x - координати по осі x початкової точки прямокутника.
y - координати по осі y початкової точки прямокутника.
width - ширина прямямокутника.
height - висота прямокутника.
fillRect() метод об'єкту CanvasRenderingContext2D який малює зафарбований прямокутник за вказаними координатами.
Прямокутник малюється використовуючи стиль CanvasRenderingContext2D.fillStyle.
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);