Метод fillRect() для canvas HTML

Определение и использование

fillRect() Метод для рисования прямоугольника с заливкой. По умолчанию цвет заливки черный.

Совет:Используйте fillStyle Свойства для установки цвета, градиента или шаблона, используемого для заливки рисования.

Пример

Нарисуйте заполненный прямоугольник с размерами 150*100 пикселей:

Ваш браузер не поддерживает тег HTML5 canvas.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.fillRect(20,20,150,100);

Попробуйте сами

Синтаксис

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

Значение параметра

Параметр Описание
x X-координата верхнего левого угла прямоугольника.
y Y-координата верхнего левого угла прямоугольника.
width Ширина прямоугольника, измеренная в пикселях.
height Высота прямоугольника, измеренная в пикселях.

Поддержка браузерами

Числа в таблице указывают на версию первого браузера, который полностью поддерживает этот атрибут.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

Комментарий:Интернет-Explorer 8 и более ранние версии не поддерживают элемент <canvas>.