Метод Canvas fillRect()

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

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,ширина,height);

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

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

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

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

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

Примечание:Internet Explorer 8 и более ранние версии не поддерживают элемент <canvas>.