Объект

определяет четыре метода рисования прямоугольников. Один из них, использовался в примере 21.7 для создания меток контрольных точек кривых Безье. Все четыре метода рисования прямоугольников принимают два аргумента, определяющих координаты одного угла прямоугольника, и два аргумента, определяющих ширину и высоту. Обычно указывается верхний левый угол и положительные значения ширины и высоты, но можно также указать другие углы и передать отрицательные размеры.

Метод

выполняет заливку внутренней области прямоугольника в соответствии со значением атрибута . Метод рисует контур прямоугольника, используя текущее значение атрибута и других атрибутов линий. Метод подобен методу , но он игнорирует текущее значение стиля заливки и заполняет прямоугольник прозрачными черными пикселами (цвет по умолчанию всех пустых холстов). Важно отметить, что все эти три метода не оказывают влияния ни на текущий контур, ни на текущую точку внутри этого контура.

Последний метод рисования прямоугольников называется

, и он изменяет текущий контур: он добавляет указанный прямоугольник в виде отдельного фрагмента контура. Подобно другим методам определения контуров, сам по себе он не производит ни заливку, ни рисование контура.

Атрибуты

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

Чтобы определить сплошной цвет, можно использовать имена цветов, определяемые стандартом HTML41(

Aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white и yellow.

), или использовать строки в формате CSS:

По умолчанию свойства

и имеют значение «#000000», соответствующее непрозрачному черному цвету. Текущие броузеры поддерживают цвета CSS3 и позволяют использовать форматы RGB, RGBA, HSL и HSLA определения цветов вдобавок к базовому формату RGB. Например:

При использовании формата HSL цвет описывается тремя числами, определяющими тон (hue), насыщенность (saturation) и яркость (lightness). Тон (hue) - это величина угла в цветовом круге. Значение 0 соответствует красному цвету, 60 - желтому, 120 - зеленому, 180 - бирюзовому, 240 - синему, 300 - сиреневому и 360 -опять красному. Насыщенность описывает интенсивность цвета и определяется в процентах. Цвета с насыщенностью 0% являются оттенками серого. Яркость описывает степень яркости цвета и также определяется в процентах. Любой цвет в формате HSL со 100-процентной яркостью является белым цветом, а любой цвет с яркостью 0% - черным. В формате HSLA цвет описывается так же, как в формате HSL, но с дополнительным значением альфа-канала, которое изменяется в диапазоне от 0.0 (прозрачный) до 1.0 (непрозрачный).