Метод >fillRect заливает прямоугольник. Он принимает координаты левого верхнего угла >x,>y, затем ширину и высоту. Схожий метод >strokeRect рисует периметр прямоугольника.
Больше у методов параметров нет. Цвет заливки, толщина обводки и другие параметры определяются не аргументами метода (как можно было бы ожидать), а свойствами объекта >context.
Задав >fillStyle, вы меняете способ, которым заливаются формы. Его можно установить в строку, обозначающую цвет, и в любой цвет, который понимает CSS.
Свойство >strokeStyle работает так же, но определяет цвет, которым будет нарисована обводка. Толщина линии определяется свойством >lineWidth, которое может содержать любое положительное число.
>
>
Когда не заданы атрибуты >width или >height, им назначаются значения по умолчанию – 300 для ширины и 150 для высоты.
Путь – последовательность линий. Двумерный холст имеет странный подход к описанию путей. Всё делается через побочные эффекты. Пути – не значения, которые можно хранить или передавать. Вместо этого, если вам что-то надо сделать с путём, вы создаёте последовательность вызовов метода для описания его формы.
>
>
Пример создаёт путь из нескольких горизонтальных отрезков, и затем обводит их методом >stroke. Каждый сегмент, созданный через >lineTo, начинается с текущей позиции пути. Эта позиция – обычно конец предыдущего сегмента, если только не было вызова >moveTo. В последнем случае следующий сегмент начнётся с позиции, заданной в >moveTo.
При заливке пути каждая из форм заливается отдельно. Путь может содержать несколько форм – каждое движение >moveTo начинает новую. Но путь должен быть закрытым (начало и конец находятся на одном месте), прежде чем его можно будет закрасить. Если путь не закрыт, от его конца до начала добавляется линия, и заливается форма, очерченная закрытым путём.
>
>
Пример рисует закрашенный треугольник. Заметьте, что непосредственно были нарисованы только две стороны. Третья, от правого нижнего угла обратно к вершине, подразумевается – она не будет закрашена вызовом