Технология пиксельного рисунка Canvas.

  В основе технологии пиксельного рисунка лежит тег CANVAS.
  Интерфейс CanvasRenderingContext2D предоставляет возможности построения двухмерного пиксельного рисунка.
  Анонсированы интерфейсы и для построения трехмерных рисунков, однако они еще не стандартизированы.
  Поскольку пиксельный рисунок создаётся как содержимое - поля элемента HTML тега CANVAS, то с помощью стандартных интерфейсов DOM для HTML-элементов, этот рисунок можно сделать анимированным.
  Существует также и технология векторного рисунка, которая, теоретически, требует меньше программирования по сравнению с CANVAS, однако это не совсем и не всегда так.
  Интерфейс CanvasRenderingContext2D.
  CanvasRenderingContext2D - Является интерфейсом для построения двухмерного пиксельного рисунка в поле элемента тега CANVAS.
  Экземпляр доступен:

  1. С помощью метода getContext объекта HTMLCanvasElement
  CanvasRenderingContext2D свойства.
  canvas - Содержит ссылку на экземпляр объекта HTMLCanvasElement связанный с рисунком.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.canvas

Значения формата записи:

  fillStyle - Содержит значение текущего цвета, градиента, или узора, используемое для внутренней окраски (заливки) фигур рисунка.
  Значение имеет строковый формат или формат экземпляра объекта.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.fillStyle[= Значение]

Значения формата записи:

  font - Содержит текущие параметры шрифта текстов рисунка.
  Значение имеет строковый формат.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.font[= Значение]

Значения формата записи:

  globalAlpha - Содержит значение текущей степени прозрачности фигур рисунка.
  Значение имеет числовой формат.
  Прозрачность распространяется на все фигуры рисунка, в том числе на линии, текст и тени.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.globalAlpha[= Значение]

Значения формата записи:

  globalCompositeOperation - Содержит текущие правила последовательности отображения фигур рисунка на "холсте" в зависимости от последовательности их "отрисовки" в коде скрипта.
  Значение имеет строковый формат.
  Правила распространяется на все фигуры рисунка, в том числе на линии, текст и тени.
  Надо иметь ввиду что, если для фигур рисунка, методами shadowOffsetX и(или) shadowOffsetY установлены тени, то эти тени считаются копиями фигур находящимися за ними, и, при некоторых правилах последовательности, тени могут выходить на передний план.
  Надо иметь в виду что, все фигуры, требующие отображения методом fill или stroke, но не отображенные, не участвуют в последовательности отображения.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.globalCompositeOperation[= Значение]

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к свойству объекта.
  • globalCompositeOperation - Ключевое слово.
  • = - Оператор присвоения. Ключевое слово в этом формате.
  • Значение - Новое значение правила наложения фигур в любом из строковых форматов.
      Одно из ключевых слов:
    • source-over - Каждая последующая фигура в порядке их "отрисовки" в скрипте помещается "перед" предыдущей (умолчание).
        Фигуры отображаются соответственно "друг перед другом".
    • destination-over - Каждая последующая фигура в порядке их "отрисовки" в скрипте помещается "под" предыдущей.
        Фигуры отображаются соответственно "друг под другом".
    • source-in - Каждая последующая фигура в порядке их "отрисовки" в скрипте помещается "перед" предыдущей.
        Отображается всегда только часть текущей "верхней" фигуры, которая имеет пересечение с отображением
        В итоге отобразится только часть самой последней "отрисованной" фигуры, которая имеет общее пересечение сразу со всеми фигурами "отрисованными" перед ней.
        Самая первая фигура в ряде должна быть отображена до присвоения свойству этого значения.
    • destination-in - Каждая последующая фигура в порядке их "отрисовки" в скрипте помещается "под" предыдущей.
        Отображается всегда только часть самой первой "отрисованной" фигуры, предыдущее отображение которой имет пересечение с текущей фигурой находящейся непосредственно "под ним".
        В итоге отобразится только часть самой первой "отрисованной" фигуры, которая имеет общее пересечение сразу со всеми фигурами "отрисованными" после неё ней.
        Самая первая фигура в ряде должна быть отображена до присвоения свойству этого значения.
    • source-out - Каждая последующая фигура в порядке их "отрисовки" в скрипте помещается "перед" предыдущей.
        Отображается всегда только часть текущей "верхней" фигуры, которая не пересекается с отображением фигуры находящейся непосредственно "под ней".
        В итоге отобразится только самая последняя "отрисованная" фигура, из которой отображение "отрисованной" непосредственно перед ней фигуры "вырежет" их пересечение.
        Самая первая фигура в ряде должна быть отображена до присвоения свойству этого значения.
    • destination-out - Каждая последующая фигура в порядке их "отрисовки" в скрипте помещается "под" предыдущей.
        Отображается всегда только часть самой первой "отрисованной" фигуры, текущее отображение которой не пересекается с текущей фигурой "под ним".
        ;В итоге отобразится только самая первая "отрисованная" фигура, из которой каждая следующая "отрисованная" фигура "вырежет" их пересечение.
        Самая первая фигура в ряде должна быть отображена до присвоения свойству этого значения.
    • source-atop - Каждая последующая фигура в порядке их "отрисовки" в скрипте помещается "перед" предыдущей.
        Отображается всегда только часть текущей "верхней" фигуры, которая пересекается с с самой первой "отрисованной" фигурой.
        В итоге отобразится только самая первая "отрисованная" фигура, "над" которой каждая следующая "отрисованная" фигура оставит часть своего пересечения с первой фигурой.
        Самая первая фигура в ряде должна быть отображена до присвоения свойству этого значения.
    • destination-atop - Каждая последующая фигура в порядке их "отрисовки" в скрипте помещается "под" предыдущей.
        Каждая последующая "отрисованная" фигура отображается, оставляя "над собой" часть их взаимного пересечения с отображением предыдущей "отрисованной" фигуры.
        В итоге отобразится только самая последняя "отрисованная" фигура, "над" которой каждая предыдущая "отрисованная" фигура оставит части своего пересечения с этой последней фигурой.
    • lighter - Каждая последующая фигура в порядке их "отрисовки" в скрипте помещается "перед" предыдущей.
        Фигуры отображаются соответственно друг над другом. Их текущее пересечение отображается цветом "сложения" наложенных цветов.
    • darker - Каждая последующая фигура в порядке их "отрисовки" в скрипте помещается "под" предыдущей.
        Фигуры отображаются соответственно друг под другом. Их текущее пересечение отображается цветом "вычитания" наложенных цветов.
    • xor - Каждая последующая фигура в порядке их "отрисовки" в скрипте помещается "перед" предыдущей.
        Пересечение каждой текущей фигуры с отображением фигур под ней не отображается.
    • copy - Каждая последующая фигура в порядке их "отрисовки" в скрипте помещается "перед" предыдущей.
        Отображается только последняя фигура.
  imageSmoothingEnabled - Содержит значение текущей резкости рисунка за счет эффекта сглаженности пикселов.
  Значение имеет логический формат.
  Эффект распространяется также на линии, текст и тени.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.imageSmoothingEnabled[= Значение]

Значения формата записи:

  lineCap - Содержит параметр текущей формы торцов линий рисунка.
  Значение имеет строковый формат.
  Форма торцов распространяется также и на линии, не поддающиеся обводке.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.lineCap[= Значение]

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к свойству объекта.
  • lineCap - Ключевое слово.
  • = - Оператор присвоения. Ключевое слово в этом формате.
  • Значение - Новое значение форму торцов в любом из строковых форматов.
      Одно из ключевых слов:
    • butt - Прямоугольный торец (умолчание).
    • round - Закругленный выпуклый торец, удлиненный на половину значения толщины линии (радиус закругления) в высшей точке.
    • square - Прямоугольный торец, удлиненный на половину значения толщины линии.
  lineDashOffset - Содержит смещение фазы пунктирных линий рисунка.
  Значение имеет числовой формат.
  Если текущие линии в пути определены как не пунктирные, то свойство lineDashOffset содержит значение undefined.
  Свойство lineDashOffset полезно для анимированных рисунков.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.lineDashOffset[= Смещение]

Значения формата записи:

  lineJoin - Содержит параметр текущей формы вершины внешнего угла соединения линий рисунка.
  Значение имеет строковый формат.
  Значение распространяется и на фигуры, нарисованные без обводки, как например strokeRect.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.lineJoin[= Значение]

Значения формата записи:

  lineWidth - Содержит значение текущей ширины линий рисунка.
  Значение имеет числовой формат.
  Значение распространяется и на фигуры, нарисованные без обводки, как например strokeRect.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.lineWidth[= Значение]

Значения формата записи:

  miterLimit - Содержит текущий лимит на длину угла соединения линий рисунка.
  Значение имеет числовой формат.
  При очень острых углах соединения линий и большой их ширине, расстояние между вершинами внутреннего и наружного углов этого соединения может быть неоправданно большим.
  Для этого случая предназначено свойство miterLimit, значение которого сглаживает угол устанавливая лимит на это расстояние.
  Однако срезать можно любые углы.
  Значение распространяется и на фигуры, нарисованные без обводки, как например strokeRect.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.miterLimit[= Значение]

Значения формата записи:

  shadowBlur - Содержит значение текущего уровня размытия теней фигур рисунка.
  Значение имеет числовой формат.
  Тени могут быть установлены свойствами shadowOffsetX или shadowOffsetY.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.shadowBlur[= Уровень]

Значения формата записи:

  shadowColor - Содержит значение текущего цвета теней фигур рисунка.
  Значение имеет строковый формат.
  Тени могут быть установлены свойствами shadowOffsetX или shadowOffsetY.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.shadowColor[= Значение]

Значения формата записи:

  shadowOffsetX - Содержит текущий горизонтальный размер выступа теней фигур рисунка.
  Значение имеет числовой формат.
  Тени устанавливаются для всех фигур рисунка, в том числе линий и текста.
  На установленные тени распространяется текущая прозрачность.
  Устанавливается именно размер выступа тени из-за фигуры. Сама тень считается копией фигуры скрытой за ней, и надо иметь в виду что, при некоторых правилах наложения фигур рисунка, тень может выдвигаться на передний план.
  Надо иметь в виду что, только при нулевом значении обоих свойств shadowOffsetX и shadowOffsetY, тени считаются вообще отсутствующими.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.shadowOffsetX[= Размер]

Значения формата записи:

  shadowOffsetY - Содержит текущий вертикальный размер выступа теней фигур рисунка.
  Значение имеет числовой формат.
  Тени устанавливаются для всех фигур рисунка, в том числе линий и текста.
  На установленные тени распространяется текущая прозрачность.
  Устанавливается именно размер выступа тени из-за фигуры. Сама тень считается копией фигуры скрытой за ней, и надо иметь в виду что, при некоторых правилах наложения фигур рисунка, тень может выдвигаться на передний план.
  Надо иметь в виду что, только при нулевом значении обоих свойств shadowOffsetX и shadowOffsetY, тени считаются вообще отсутствующими.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.shadowOffsetX[= Размер]

Значения формата записи:

  strokeStyle - Содержит текущее значение цвета, градиента, или узора линий рисунка.
  Значение имеет строковый формат, или формат экземпляра объекта.
  Значение распространяется и на фигуры, нарисованные без обводки, как например strokeRect.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.strokeStyle[= Значение]

Значения формата записи:

  textAlign - Содержит текущее правило горизонтального выравнивания текстов рисунка.
  Значение имеет строковый формат.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.textAlign[= Значение]

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к свойству объекта.
  • textAlign - Ключевое слово.
  • = - Оператор присвоения. Ключевое слово в этом формате.
  • Значение - Новое значение выравнивания шрифта.
      Одно из следующих значений в любом из строковых форматов:
    • left - Выравнивание по левому краю заданной области. (Умолчание.)
    • right - Выравнивание по правому краю заданной области.
    • center - Выравнивание по центру заданной области.
    • start – Выравнивание по краю начала чтения пользователем текста в заданной области.
        Например для арабского или "зеркалированного" текста это будет правый край.
    • end – Выравнивание по краю конца чтения пользователем в заданной области.
        Например для арабского или "зеркалированного" текста это будет левый край.
  textBaseline - Содержит текущее правило вертикального выравнивание строк текстов рисунка.
  Значение имеет строковый формат.
  Вертикальное выравнивание ориентировано на базовую линию строки.
  Базовая линия это воображаемая линия, на которой располагается текст строки по умолчанию.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.textBaseline[= Значение]

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к свойству объекта.
  • textBaseline - Ключевое слово.
  • = - Оператор присвоения. Ключевое слово в этом формате.
  • Значение - Новое значение выравнивания шрифта.
      Одно из следующих значений в любом из строковых форматов:
    • alphabetic - Текст располагается на базовой линии. (Умолчание.)
    • top - Текст располагается под базовой линией.
    • bottom - Текст располагается над базовой линией.
    • hanging - Текст располагается "подвешенным" к базовой линии. (Аналогично alphabetic, только текст находится снизу базовой линии.)
    • middle – Базовая линия делит текст пополам.
    • ideographic – Текст располагается на базовой линии идеографически подогнанной к ней.
  CanvasRenderingContext2D методы.
  arc - Рисует кривую линию соответствующую дуге окружности. Перемещает позицию виртуального пера в конечную точку этой линии.
  Возвращает значение undefined.
  Нарисованная методом arc линия отображается последующим применением метода stroke, то есть поддается обводке, и не обведенная остается прозрачной.
  Если рисование такой линии начинается в пути, в котором уже была достигнута некоторая точка, то, от этой точки до начальной точки дуги, автоматически проводится прямая линия, которая также отображается последующим применением метода stroke.
  Если в текущем пути еще не достигнута определенная точка, то метод arc нарисует только дугу окружности.
  Параметры линии определятся текущей установкой свойств экземпляра объекта CanvasRenderingContext2D для линий.
  Все фигуры, контур которых, нарисован линиями, в том числе и методом arc, поддаются заливке, но не залитые, остаются прозрачными.
  Не замкнутый контур таких фигур виртуально замыкается, тем самым определяя площадь заливки, однако виртуальная замыкающая прямая линия всегда прозрачна и не поддается обводке.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.arc(X, Y, R, Начало, Окончание [,"anticlockwise"])

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • arc - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • X - Горизонтальное смещение (в пикселях) центра окружности в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
      Центр окружности не обязательно должен находиться в пределах "холста".
  • Y - Вертикальное смещение (в пикселях) центра окружности в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
      Центр окружности не обязательно должен находиться в пределах "холста".
  • R - Величина радиуса (в пикселях) окружности в любом числовом формате.
      Радиус окружности может быть больше пределов "холста".
  • Начало - Угол положения начальной точки дуги окружности (в радианах) в любом числовом формате.
      Точка 0 определяется по правилам тригонометрии в системе координат образованной горизонтальным и вертикальным радиусами окружности с центром в её центре.
  • Окончание - Угол положения конечной точки дуги окружности (в радианах) в любом числовом формате.
      Точка 0 определяется по правилам тригонометрии в системе координат образованной горизонтальным и вертикальным радиусами окружности с центром в её центре.
  • anticlockwise - Ключевое слово означающее прорисовку против часовой стрелки, заданное в любом строковом формате.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  arcTo - Рисует линию состоящую из дуги окружности между ее касаниями двух прямых и части одной из прямых до касания. Перемещает позицию виртуального пера в конечную точку этой линии.
  Возвращает значение undefined.
  Нарисованная методом arcTo линия отображается последующим применением метода stroke, то есть поддается обводке, и не обведенная остается прозрачной.
  Параметры линии определятся текущей установкой свойств экземпляра объекта CanvasRenderingContext2D для линий.
  Все фигуры, контур которых, нарисован линиями, в том числе и методом arcTo, поддаются заливке, но не залитые, остаются прозрачными.
  Не замкнутый контур таких фигур виртуально замыкается, тем самым определяя площадь заливки, однако виртуальная замыкающая прямая линия всегда прозрачна и не поддается обводке.
  Если текущаа позиция виртуального пера не определена, то метод arcTo не работает.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.arcTo(X1, Y1, X2, Y2, R)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • arcTo - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • X1 - Горизонтальное смещение (в пикселях) точки, до которой проводится воображаемая первая прямая касания от текущей позиции виртуального пера, в любом числовом формате.
      Часть этой прямой, от текущей позиции до точки касания, отобразится на холсте.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y1 - Вертикальное смещение (в пикселях) точки, до которой проводится воображаемая первая прямая касания от текущей позиции виртуального пера, в любом числовом формате.
      Часть этой прямой, от текущей позиции до точки касания, отобразится на холсте.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • X2 - Горизонтальное смещение (в пикселях) точки, до которой проводится воображаемая вторая прямая касания от точки <X1,Y1>, в любом числовом формате.
      Эта прямая никак не отобразится на холсте.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y2 - Вертикальное смещение (в пикселях) точки, до которой проводится воображаемая вторая прямая касания от точки <X1,Y1>, в любом числовом формате.
      Эта прямая никак не отобразится на холсте.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • R - Величина радиуса (в пикселях) окружности в любом числовом формате.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  Несовместимые значения аргументов метода arcTo приведут к "пустому" результату.
  Конечная точка виртуального пера после построения этой линии определится точкой касания окружности со второй прямой (не координатой <X2,Y2>!).
  beginPath - Начинает новый путь виртуального пера по "холсту" и заканчивает старый.
  Возвращает значение undefined.
  После обращения к методу beginPath положение начальной позиции виртуального пера становится неопределенным. Фигуры, не залитые в предыдущем пути, остаются без заливки. Фигур, не обведенные в предыдущем пути, остаются без обводки.
  Вообще говоря, неоднократное обращение к методам fill и(или) stroke в одном и том же пути приводит к перезаливке и(или) переобводке всех уже нарисованных и поддающихся заливке и(или) обводке фигур в этом пути. Поэтому новые текущие значения соответствующих свойств экземпляра объекта CanvasRenderingContext2D приведут к изменению, например, цвета заливки, или ширины линий, или появлению теней у уже закрашенных и обведенных фигур.
  Кроме того, некоторые методы (например, arc), работают по разному в зависимости от того, определена или нет текущая точка виртуального пера при обращении к такому методу.
  Этим и обусловлен функционал разбивки рисунка на отдельные пути.
  Этот функционал также удобен при создании анимированных рисунков.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.beginPath()

Значения формата записи:

  bezierCurveTo - Рисует линию, соответствующую кривой (кубической Безье) от текущей позиции виртуального пера до заданной точки. Перемещает позицию виртуального пера в эту точку.
  Возвращает значение undefined.
  Нарисованная методом bezierCurveTo линия отображается последующим применением метода stroke, то есть поддается обводке, и не обведенная остается прозрачной.
  Параметры линии определятся текущей установкой свойств экземпляра объекта CanvasRenderingContext2D для линий.
  Все фигуры, контур которых, нарисован линиями, в том числе и методом bezierCurveTo, поддаются заливке, но не залитые, остаются прозрачными.
  Не замкнутый контур таких фигур виртуально замыкается, тем самым определяя площадь заливки, однако виртуальная замыкающая прямая линия всегда прозрачна и не поддается обводке.
  Если текущая позиция виртуального пера не определена, то метод bezierCurveTo не работает.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.bezierCurveTo(XC1 ,YC1, XC2 ,YC2, X ,Y)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • bezierCurveTo - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • XC1 - Горизонтальное смещение (в пикселях) первой точки управления кривизной в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
      Точка управления кривизной не обязательно должна находиться в пределах "холста".
  • YC1 - Вертикальное смещение (в пикселях) первой точки управления кривизной в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
      Точка управления кривизной не обязательно должна находиться в пределах "холста".
  • XC2 - Горизонтальное смещение (в пикселях) второй точки управления кривизной в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
      Точка управления кривизной не обязательно должна находиться в пределах "холста".
  • YC2 - Вертикальное смещение (в пикселях) второй точки управления кривизной в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
      Точка управления кривизной не обязательно должна находиться в пределах "холста".
  • X - Горизонтальное смещение (в пикселях) заданной конечной точки кривой в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y - Вертикальное смещение (в пикселях) заданной конечной точки кривой в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  clearRect - Очищает (стирает) прямоугольную область с заданными параметрами.
  Возвращает значение undefined.
  На "холсте" затираются все части всех фигур рисунка попавшие в область очистки.
  Однако фигуры поддающиеся заливке и(или) обводке в текущем пути могут быть восстановлены последующими обращениями к методам stroke и(или) fill.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.clearRect(Х, Y, Ширина, Высота)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • clearRect - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • X - Горизонтальное смешение правого верхнего угла прямоугольной области на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y - Вертикальное смешение правого верхнего угла прямоугольной области на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Ширина - Значение ширины прямоугольной области (в пикселях) в любом числовом формате.
  • Высота - Значение высоты прямоугольной области (в пикселях) в любом числовом формате.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  clip - Завершает построение "маски" для рисунка.
  Возвращает значение undefined.
  Все фигуры нарисованые до обращения к методу clip становятся фигурами "маски".
  Соответственно все фигуры, нарисованные в любом пути после обращения к методу clip, будут видны только через "окна" построенные фигурами "маски".
  Незамкнутые фигуры "маски", по возможности, виртуально замкнутся.
  Если фигуры "маски" залиты, или(и) их контур обведен, то они полностью или частично становятся "непрозрачными" в "маске".
  Фигуры, которые не поддаются обводке и (или) заливке, также "непрозрачны" в "маске".

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.clip()

Значения формата записи:

  closePath - Замыкает прямой линией, из конечной к начальной точке, текущую незамкнутую фигуру нарисованную линиями и переводит позицию виртуального пера в точку замыкания.
  Возвращает значение undefined.
  Для отображения замыкающей линии необходимо обратиться к методу stroke, то есть она поддается обводке. А вся замкнутая фигура поддается заливке. Однако без обводки нарисованная линия будет прозрачна.
  Параметры линии определятся текущей установкой свойств экземпляра объекта CanvasRenderingContext2D для линий.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.closePath()

Значения формата записи:

  createImageData - Создает в памяти прямоугольную область с пиксельным изображением.
  Возвращает экземпляр объекта ImageData для этой области.

Формат записи в коде скрипта:

  1. Экземпляр объекта CanvasRenderingContext2D.createImageData([Данные,] Ширина, Высота)
  2. Экземпляр объекта CanvasRenderingContext2D.createImageData(ImageData)

Значения формата записи:

  createLinearGradient - Формирует область линейного градиента на "холсте".
  Возвращает экземпляр объекта CanvasGradient для этой области.
  Область линейного градиента распространяется по всему полю "холста" вдоль направляющего отрезка прямой с координатами заданными методом.
  Если фигура, для которой установлена градиентная заливка, выходит за область действия градиента, то выходящие части такой фигуры будут окрашены в цвета соответствующих границ градиента.
  Если фигура, для которой установлена градиентная заливка, полностью не попадает в область действия градиента, то такая фигура будет окрашена в цвет ближайшей границы градиента.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.createLinearGradient(X1, Y1, X2, Y2)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • createLinearGradient - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • X1 - Горизонтальное смешение начальной точки линии градиента на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y1 - Вертикальное смешение начальной точки линии градиента на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • X2 - Горизонтальное смешение конечной точки линии градиента на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y2 - Вертикальное смешение конечной точки линии градиента на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  createPattern - Возвращает экземпляр объекта CanvasPattern - шаблон-изображение для заливки.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.createPattern(Рисунок, Частота)

Значения формата записи:

  createRadialGradient - Формирует область радиального градиента на "холсте" и возвращает экземпляр объекта CanvasGradient для этой области.
  Область радиального градиента радиально распространяется по всему полю "холста" находящемуся между двумя вложенными окружностями с координатами и радиусами заданными методом.
  Если фигура, для которой установлена градиентная заливка, выходит за область действия градиента, то выходящие части такой фигуры будут окрашены в цвета соответствующих границ градиента.
  Если фигура, для которой установлена градиентная заливка, полностью не попадает в область действия градиента, то такая фигура будет окрашена в цвет ближайшей границы градиента.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.createRadialGradient(X1, Y1, R1, X2, Y2, R2)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • createRadialGradient - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • X1 - Горизонтальное смешение центра внутренней окружности градиента на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
      Центр окружности не обязательно должен находиться в пределах "холста".
  • Y1 - Вертикальное смешение центра внутренней окружности градиента на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
      Центр окружности не обязательно должен находиться в пределах "холста".
  • R1 - Радиус внутренней окружности, пикселях, в любом числовом формате.
      Радиус окружности может быть больше пределов "холста".
  • X2 - Горизонтальное смешение центра внешней окружности градиента на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
      Центр окружности не обязательно должен находиться в пределах "холста".
  • Y2 - Вертикальное смешение центра внешней окружности градиента на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
      Центр окружности не обязательно должен находиться в пределах "холста".
  • R2 - Радиус внешней окружности, в пикселях, в любом числовом формате.
      Радиус окружности может быть больше пределов "холста".
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  drawFocusIfNeeded - Визуализирует или делает невидимыми не обведенные фигуры из линий в зависимости от того, попадает или выходит из фокуса ввода заданный элемент тега.
  Возвращает значение undefined.
  В принципе метод drawFocusIfNeeded предназначен для определения фокусировки в поле элемента тега, который находится внутри соответствующего элемента тега CANVAS. Однако браузеры не отображают такие элементы, как впрочем, не все браузеры понимают этот метод.
  Можно попытаться использовать технологию теневого дерева, но имеется множество способов выделить поле в фокусе ввода без использования CANVAS.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.drawFocusIfNeeded(Элемент)

Значения формата записи:

  drawImage - Помещает на "холст" готовое изображение или его часть.
  Возвращает значение undefined.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.drawImage(Рисунок[, XС][, YС][, ШиринаС][, ВысотаС]], XР, YР[, ШиринаР][, ВысотаР])

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • drawImage - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Рисунок - Рисунок для изображения.
      Может иметь следующие значения:
  • - Горизонтальное смешение правого верхнего угла части изображения (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле изображения.
      Если аргумент не задан, то изображение выбирается с его начальной горизонтальной точки.
  • - Вертикальное смешение правого верхнего угла части изображения (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле изображения.
      Если аргумент не задан, то изображение выбирается с его начальной вертикальной точки.
  • ШиринаС - Значение ширины части изображения (в пикселях) в любом числовом формате.
      Если аргумент не задан, то выбирается весь оставшийся размер изображения по ширине.
  • ВысотаС - Значение высоты части изображения (в пикселях) в любом числовом формате.
      Если аргумент не задан, то выбирается весь оставшийся размер изображения по высоте.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  • - Горизонтальное смешение правого верхнего угла области для рисунка на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле изображения.
  • - Вертикальное смешение правого верхнего угла области для рисунка на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле изображения.
  • ШиринаС - Значение ширины области для рисунка на "холсте" (в пикселях) в любом числовом формате.
      Если не указано, то изображение не сжимается или не растягивается по ширине.
  • ВысотаС - Значение высоты области для рисунка (в пикселях) в любом числовом формате.
      Если аргумент не задан, то изображение не сжимается или не растягивается по высоте.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  ellipse - Рисует кривую линию соответствующую дуге эллипса. Перемещает позицию виртуального пера в конечную точку этой дуги.
  Возвращает значение undefined.
  Нарисованная методом ellipse линия отображается последующим применением метода stroke, то есть поддается обводке, и не обведенная остается прозрачной.
  Если рисование такой линии начинается в пути, в котором уже была достигнута некоторая точка, то, от этой точки до начальной точки дуги, автоматически проводится прямая линия, которая также отображается последующим применением метода stroke.
  Если в текущем пути еще не достигнута определенная точка, то метод ellipse нарисует только дугу эллипса.
  Параметры линии определятся текущей установкой свойств экземпляра объекта CanvasRenderingContext2D для линий.
  Все фигуры, контур которых, нарисован линиями, в том числе и методом ellipse, поддаются заливке, но не залитые, остаются прозрачными.
  Не замкнутый контур таких фигур виртуально замыкается, тем самым определяя площадь заливки, однако виртуальная замыкающая прямая линия всегда прозрачна и не поддается обводке.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.ellipse(X ,Y, RX, RY, Поворот, Начало, Окончание [,"anticlockwise"])

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • ellipse - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • X - Горизонтальное смещение (в пикселях) центра эллипса в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
      Центр эллипса не обязательно должен находиться в пределах "холста".
  • Y - Вертикальное смещение (в пикселях) центра эллипса в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
      Центр эллипса не обязательно должен находиться в пределах "холста".
  • RX - Величина радиуса по горизонтальной оси эллипса (в пикселях) в любом числовом формате.
      При поворот=0 горизонтальная и вертикальная оси эллипса совпадают с направлением соответствующих осей системы координат "холста".
      Любой радиус эллипса может быть больше пределов "холста".
  • RY - Величина радиуса по вертикальной оси эллипса (в пикселях) в любом числовом формате.
      При поворот=0 горизонтальная и вертикальная оси эллипса совпадают с направлением соответствующих осей системы координат "холста".
      Любой радиус эллипса может быть больше пределов "холста".
  • Поворот - Угол поворота по часовой стрелке осей эллипса относительно осей системы координат "холста" (в радианах) в любом числовом формате.
  • Начало - Угол положения начальной точка дуги эллипса (в радианах) в любом числовом формате.
      Точка 0 определяется по правилам тригонометрии в системе координат образованной осями эллипса с центром в его центре.
  • Окончание - Угол положения конечной точки дуги эллипса (в радианах) в любом числовом формате.
      Точка 0 определяется по правилам тригонометрии в системе координат образованной осями эллипса с центром в его центре.
  • anticlockwise - Ключевое слово означающее прорисовку против часовой стрелки, заданное в любом строковом формате.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  fill - Заливает все фигуры поддающиеся заливке в этом пути.
  Возвращает значение undefined.
  Параметры заливки определяются текущим значением соответствующих свойств экземпляра объекта CanvasRenderingContext2D.
  Неоднократное обращение к методу fill в текущем пути приводит к перезаливке всех уже нарисованных и поддающихся заливке фигур в этом пути.
  На фигуры в других путях метод не воздействует.
  Если контур какой-либо фигуры не замкнут, то она заливается, так, как будто она замкнута виртуальной прямой линией между начальной и конечной точками.
   В любом случае, контур заливаемой фигуры может быть виртуально замкнут и за пределами "холста".
  Если контур заливаемой фигуры должен быть обведен, то его следует обвести до обращения к методу fill, поскольку ширина линий обводки, после ее выполнения уже залитой фигуры, может искажаться.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.fill()

Значения формата записи:

  fillRect - Рисует с заливкой прямоугольную область на "холсте" с заданными параметрами.
  Возвращает значение undefined.
  Прямоугольник нарисованный методом fillRect отображаетя залитым сразу.
  Параметры заливки определяются текущим значением соответствующих свойств экземпляра объекта CanvasRenderingContext2D.
  Нарисованный методом fillRect прямоугольник не восприимчив к методам stroke и(или) fill, то есть не поддается обводке и(или) заливке.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.fillRect(Х, Y, Ширина, Высота)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • fillRect - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • X - Горизонтальное смешение правого верхнего угла прямоугольной области на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y - Вертикальное смешение правого верхнего угла прямоугольной области на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Ширина - Значение ширины прямоугольной области (в пикселях) в любом числовом формате.
  • Высота - Значение высоты прямоугольной области (в пикселях) в любом числовом формате.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  fillText - Рисует заданный текст на "холсте" с заливкой символов.
  Возвращает значение undefined.
  Символы текста нарисованного методом fillText отображаются залитыми сразу.
  Параметры шрифта определяются текущим значением свойства font.
  Параметры заливки шрифта определяются текущим значением соответствующих свойств экземпляра объекта CanvasRenderingContext2D.
  Нарисованный методом fillText текст не восприимчив к методам stroke и(или) fill, то есть не поддается обводке и(или) заливке.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.fillText(Текст, Х, Y[, Ширина])

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • fillText - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Текст - Текстовая строка для отображения, в любом строковом формате.
  • X - Горизонтальное смешение начала текста на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y - Вертикальное смешение начала текста на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Ширина - Максимальная разрешенная ширина текста (в пикселях) в любом числовом формате.
      По умолчанию рассчитывается по ширине шрифта, но если задать максимальную ширину текста меньше расчетной, то символы текста сожмутся.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  getImageData - Возвращает экземпляр объекта ImageData для рисунка находящегося в заданной области "холста".

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.getImageData(Х, Y, Ширина, Высота)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • getImageData - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • X - Горизонтальное смешение правого верхнего угла области на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y - Вертикальное смешение правого верхнего угла области на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Ширина - Значение ширины области (в пикселях) в любом числовом формате.
  • Высота - Значение высоты области (в пикселях) в любом числовом формате.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  getLineDash - Возвращает массив параметров пунктирных линий в этом пути.
  Если линии сплошные, то возвращает значение undefined.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.getLineDash()

Значения формата записи:

  quadraticCurveTo - Рисует линию,соответствующую кривой (квадратичной Безье) от текущей позиции виртуального пера до заданной точки. Перемещает позицию виртуального пера в эту точку.
  Возвращает значение undefined.
  Нарисованная методом quadraticCurveTo линия отображается последующим применением метода stroke, то есть поддается обводке, и не обведенная остается прозрачной.
  Параметры линии определятся текущей установкой свойств экземпляра объекта CanvasRenderingContext2D для линий.
  Все фигуры, контур которых, нарисован линиями, в том числе и методом quadraticCurveTo, поддаются заливке, но не залитые, остаются прозрачными.
  Не замкнутый контур таких фигур виртуально замыкается, тем самым определяя площадь заливки, однако виртуальная замыкающая прямая линия всегда прозрачна и не поддается обводке.
  Если текущая позиция виртуального пера не определена, то метод quadraticCurveTo не работает.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.quadraticCurveTo(XC ,YC, X ,Y)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • quadraticCurveTo - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • XC - Горизонтальное смещение (в пикселях) точки управления кривизной в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • YC - Вертикальное смещение (в пикселях) точки управления кривизной в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • X - Горизонтальное смещение (в пикселях) заданной конечной точки кривой в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y - Вертикальное смещение (в пикселях) заданной конечной точки кривой в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  isPointInPath - Проверяет находится ли заданная точка "холста" внутри или на контуре любой фигуры нарисованной линиями в этом пути.
  Возвращает логическое значение.
  Фигура может быть обведена или нет в момент вызова метода isPointInPath.
  Если фигура нарисована целиком без контура, например методом fillRect, то на ней метод вернет значение false.
  Контур отрисовки фигуры может быть не замкнут, в этом случае метод считает, что она виртуально замкнута методом closePath.
  Учитывается ширина линии контура.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.isPointInPath(Х, Y)

Значения формата записи:

  isPointInStroke - Проверяет находится ли заданная точка "холста" на контуре любой фигуры нарисованной линиями в этом пути.
  Возвращает логическое значение.
  Фигура может быть обведена или нет в момент вызова метода isPointInStroke.
  Если фигура нарисована целиком, например методом strokeRect, то не ней метод вернет значение false.
  Контур отрисовки фигуры может быть не замкнут, в этом случае метод считает, что она виртуально замкнута методом closePath.
  Учитывается ширина линии контура.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.isPointInStroke(Х, Y)

Значения формата записи:

  lineTo - Рисует прямую линию от текущей позиции виртуального пера до заданной точки. Перемещает позицию виртуального пера в эту точку.
  Возвращает значение undefined.
  Нарисованная методом lineTo линия отображается последующим применением метода stroke, то есть поддается обводке, и не обведенная остается прозрачной.
  Параметры линии определятся текущей установкой свойств экземпляра объекта CanvasRenderingContext2D для линий.
  Все фигуры, контур которых, нарисован линиями, в том числе и методом lineTo, поддаются заливке, но не залитые, остаются прозрачными.
  Не замкнутый контур таких фигур виртуально замыкается, тем самым определяя площадь заливки, однако виртуальная замыкающая прямая линия всегда прозрачна и не поддается обводке.
  Если текущая позиция виртуального пера не определена, то метод lineTo не работает.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.lineTo(X, Y)

Значения формата записи:

  measureText - Возвращает экземпляр объекта TextMetrics содержащий метрические параметры заданного текста.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.measureText(Текст)

Значения формата записи:

  moveTo - Перемещает позицию виртуального пера в заданную точку.
  Возвращает значение undefined.
  Такое перемещение никак не отображается на "холсте".

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.moveTo(X, Y)

Значения формата записи:

  putImageData - Отображает указанный пиксельный рисунок, или его часть, на "холсте".
  Возвращает значение undefined.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.putImageData(Рисунок, Х, Y[, ХР][, YР][, Ширина][, Высота])

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • putImageData - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Рисунок - Любой операнд значения со значением экземпляра объекта ImageData.
      Может быть получен методами createImageData или getImageData.
  • X - Горизонтальное смешение правого верхнего угла области для рисунка на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y - Вертикальное смешение правого верхнего угла области для рисунка на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • ХР - Горизонтальное смешение правого верхнего угла выбираемой части рисунка (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле рисунка.
      Если аргумент не задан, то рисунок выбирается с нулевой горизонтальной точки.
  • - Вертикальное смешение правого верхнего угла выбираемой части рисунка (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле рисунка.
      Если аргумент не задан, то рисунок выбирается с нулевой вертикальной точки.
  • Ширина - Значение ширины выбираемой части рисунка (в пикселях) в любом числовом формате.
      Если аргумент не задан, то рисунок выбирается до последнего горизонтального пикселя.
  • Высота - Значение высоты выбираемой части рисунка (в пикселях) в любом числовом формате.
      Если аргумент не задан, то рисунок выбирается до последнего вертикального пикселя.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  rect - Рисует линиями полный контур прямоугольника с заданными параметрами.
  Возвращает значение undefined.
  Нарисованный таким образом контур прямоугольника отображается последующим применением метода stroke, а обведенная им область заливается методом fill.
  То есть этот прямоугольник поддается обводке и заливке. Однако без обводки и(или) заливки он останется прозрачным.
  Параметры линий контура прямоугольника определятся текущей установкой свойств экземпляра объекта CanvasRenderingContext2D для линий.
  Параметры заливки прямоугольника определятся текущей установкой соответствующих свойств экземпляра объекта CanvasRenderingContext2D.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.rect(Х, Y, Ширина, Высота)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • rect - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • X - Горизонтальное смещение правого верхнего угла прямоугольника на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y - Вертикальное смещение правого верхнего угла прямоугольника на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Ширина - Значение ширины прямоугольника (в пикселях) в любом числовом формате.
  • Высота - Значение высоты прямоугольника (в пикселях) в любом числовом формате.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  resetTransform - Cбрасывет все изменения системы координат и параметры трансформации получившиеся методами transform, setTransform, scale, rotate, translate.
  Возвращает значение undefined.
  После вызова метода resetTransform все последующие фигуры будут отрисованы без трансформаций.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.resetTransform()

Значения формата записи:

  restore - Восстанавливает на "холсте" рисунок сохраненный методом save.
  Возвращает значение undefined.
  Восстановление рисунка отменяет все изменения, внесенные после последнего вызова метода save.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.restore()

Значения формата записи:

  rotate - Поворачивает систему координат "холста", тем самым виртуально поворачивая рисунок на нем.
  Возвращает значение undefined.
  Метод rotate применяется перед последующим "рисованием", того что необходимо отобразить в повернутой системе.
  На самом деле размеры и координаты последующих фигур не меняются, просто создается эффект поворота "холста" на плоскости экрана.
  Надо иметь ввиду, что, если часть фигуры была "нарисована" до применения метода rotate, то может получиться неожидаемый эффект. Например, линия, начальная точка которой получена до применения метода rotate, виртуально изменит только положение конечной точки.
  Надо иметь в виду, что последовательное применение метода rotate поворачивает систему координат от уже достигнутого положения.
  Надо иметь в виду, что установленные уже области градиентов повернутся вместе с системой координат.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.rotate(Угол)

Значения формата записи:

  save - Сохраняет текущий рисунок с "холста" в памяти.
  Возвращает значение undefined.
  Сохраненный рисунок может восстановлен на "холсте" методом restore.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.save()

Значения формата записи:

  scale - Масштабирует систему координат "холста", тем самым виртуально изменяя рисунок на нем.
  Возвращает значение undefined.
  Метод scale применяется перед последующим "рисованием", того что необходимо отобразить в отмасштабированной системе.
  На самом деле размеры и координаты последующих фигур не меняются, просто создается эффект сжатия или растяжения "холста" на экране. Так, при одинаковом масштабировании обеих осей координат, получается эффект приближения или удаления фигуры.
  Надо иметь в виду, что, если часть фигуры была "нарисована" до применения метода scale, то может получиться неожидаемый эффект. Например, линия, начальная точка которой получена до применения метода scale, виртуально изменит только свою толщину и положение конечной точки.
  Надо иметь в виду, что последовательное применение метода scale масштабирует систему координат от уже достигнутого масштаба.
  Надо иметь в виду, что установленные уже области градиентов отмасштабируются вместе с системой координат.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.scale(Х, Y)

Значения формата записи:

  setLineDash - Устанавливает или отменяет пунктирный стиль линий.
  Возвращает значение undefined.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.setLineDash(Массив)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • setLineDash - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Массив - Любой формат одномерного массива.
      В этом массиве должна быть хотя бы одна пара элементов.
      Первый элемент задает длину пунктира(в пикселях).
      Второй элемент задает отступ от следующего пунктира(в пикселях).
      Вся линия будет разбита на пунктиры пропорционально количеству таких пар.
      Одна пара означает равномерную пунктирность.
      Единственная пара - [L,0] (где L -любое число большее 0) будет означать сплошную линию.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  setTransform - Трансформирует виртуально рисунок на "холсте".
  Возвращает значение undefined.
  Метод setTransform применяется перед последующим "рисованием", того что необходимо отобразить в трансформированном виде.
  На самом деле размеры и координаты последующих фигур не меняются, просто создается эффект их визуальной трансформации.
  Надо иметь в виду, что, если часть фигуры, например начальная точка линии, была "нарисована" до применения метода setTransform, то может получиться неожидаемый эффект.
  Надо иметь в виду, что метод setTransform предварительно сбрасывает все изменения получившиеся методами transform, scale, rotate, translate.
  Надо иметь в виду, что установленные уже области градиентов тоже соответственно трансформируются.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.setTransform(МасштабХ, УголX, УголY, МасштабY, СмещениеX, СмешениеY)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • setTransform - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • МасштабХ - Растяжение (сжатие) по горизонтали (в пикселях) в любом числовом формате.
      Допускается значение меньшее 0.
  • МасштабY - Растяжение (сжатие) по вертикали (в пикселях) в любом числовом формате. (Допускается значение меньшее 0.)
  • УголX - Наклон по горизонтали (в радианах) по часовой стрелке, в любом числовом формате.
      Допускается значение меньшее 0.
  • УголY - Наклон по вертикали (в радианах) по часовой стрелке, в любом числовом формате.
      Допускается значение меньшее 0.
  • СмещениеХ - Расстояние смещения по горизонтали (в пикселях) в любом числовом формате.
      Допускается значение меньшее 0.
  • СмешениеY - Расстояние смещения по вертикали (в пикселях) в любом числовом формате.
      Допускается значение меньшее 0.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  stroke - Обводит все поддающиеся обводке фигуры текущего пути.
  Возвращает значение undefined.
  Параметры линий обводки определяются текущим значением соответствующих свойств экземпляра объекта CanvasRenderingContext2D.
  Неоднократное обращение к методу stroke в текущем пути приводит к переобводке всех уже нарисованных поддающиеся обводке фигур в этом пути.
  На фигуры в других путях метод stroke не воздействует.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.stroke()

Значения формата записи:

  strokeRect - Рисует линиями прямоугольную рамку с заданными параметрами.
  Возвращает значение undefined.
  Контур, нарисованной таким образом рамки, отображается сразу без последующего вызова метода stroke, то есть рамка не поддается обводке.
  Внутренняя область рамки не поддается заливке, то есть она всегда прозрачна.
  Параметры линий рамки определяются текущим значением соответствующих свойств экземпляра объекта CanvasRenderingContext2D для линий.
  Если текущая ширина линий не совместима с размерами образованного прямоугольника, то может получиться неожиданный эффект.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.strokeRect(Х, Y, Ширина, Высота)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • strokeRect - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • X - Горизонтальное смешение правого верхнего угла рамки на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y - Вертикальное смешение правого верхнего угла рамки на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Ширина - Значение ширины рамки (в пикселях) в любом числовом формате.
  • Высота - Значение высоты рамки (в пикселях) в любом числовом формате.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  strokeText - Рисует заданный текст контуром символов (без заливки) на "холсте".
  Возвращает значение undefined.
  Параметры шрифта определяются текущим значением свойства font.
  Символы нарисованного методом strokeText текста сразу обведены по контуру без последующего вызова метода stroke, то есть не поддаются обводке.
  Параметры линий контура символов определяются текущим значением соответствующих свойств экземпляра объекта CanvasRenderingContext2D для линий.
  Символы нарисованного методом strokeText текста не поддаются заливке и всегда прозрачны.
  Если текущая ширина линий не совместима с размерами шрифта, то может получиться неожиданный эффект.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.strokeTextt(Текст, Х, Y[, Ширина])

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • strokeText - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • Текст - Текстовая строка для отображения, в любом строковом формате.
  • X - Горизонтальное смешение начала текста на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Y - Вертикальное смешение начала текста на "холсте" (в пикселях) в любом числовом формате.
      Точка со смещением 0 находится в левом верхнем угле "холста".
  • Ширина - Максимальная разрешенная ширина текста (в пикселях) в любом числовом формате.
      По умолчанию рассчитывается по ширине шрифта, но если задать максимальную ширину текста меньше расчетной, то символы текста сожмутся.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  transform - Трансформирует виртуально рисунок на холсте.
  Возвращает значение undefined.
  Метод transform применяется перед последующим "рисованием", того что необходимо отобразить в трансформированном виде.
  На самом деле размеры и координаты последующих фигур не меняются, просто создается эффект их визуальной трансформации.
  Надо иметь в виду, что, если часть фигуры, например начальная точка линии, была "нарисована" до применения метода transform, то может получиться неожидаемый эффект.
  Надо иметь в виду, что последовательное применение метода transform трансформирует рисунок уже достигнутого положения.
  Надо иметь в виду, что установленные уже области градиентов тоже соответственно трансформируются.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.transform(МасштабХ, УголX, УголY, МасштабY, СмещениеX, СмешениеY)

Значения формата записи:

  • Экземпляр объекта CanvasRenderingContext2D - Любой операнд значения со значением экземпляра объекта CanvasRenderingContext2D.
  • . - Оператор доступа к методу объекта.
  • transform - Ключевое слово.
  • ( - Оператор группировки. Ключевое слово в этом формате.
  • МасштабХ - Растяжение (сжатие) по горизонтали (в пикселях) в любом числовом формате.
      Допускается значение меньшее 0.
  • МасштабY - Растяжение (сжатие) по вертикали (в пикселях) в любом числовом формате.
      Допускается значение меньшее 0.
  • УголX - Наклон по горизонтали (в радианах) по часовой стрелке, в любом числовом формате.
      Допускается значение меньшее 0.
  • УголY - Наклон по вертикали (в радианах) по часовой стрелке, в любом числовом формате.
      Допускается значение меньшее 0.
  • СмещениеХ - Расстояние смещения по горизонтали (в пикселях) в любом числовом формате.
      Допускается значение меньшее 0.
  • СмешениеY - Расстояние смещения по вертикали (в пикселях) в любом числовом формате.
      Допускается значение меньшее 0.
  • , - Оператор группировки. Ключевое слово в этом формате.
  • ) - Оператор группировки. Ключевое слово в этом формате.
  translate - Смещает центр системы координат "холста", тем самым виртуально изменяя положение рисунка на нем.
  Возвращает значение undefined.
  Метод применяется перед последующим "рисованием", того что необходимо отобразить в смещенной системе.
  На самом деле координаты последующих фигур не меняются, просто создается эффект смещения "холста" на экране.
  Надо иметь в виду, что, если часть фигуры была "нарисована" до применения метода translate, то может получиться неожидаемый эффект. Например, линия, начальная точка которой получена до применения метода translate, виртуально изменит только положение конечной точки.
  Надо иметь в виду, что последовательное применение метода translate смещает систему координат от уже достигнутого положения.
  Надо также иметь в виду, что установленные уже области градиентов смещаются вместе с системой координат.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasRenderingContext2D.translate(Х, Y)

Значения формата записи:

  Интерфейс CanvasGradient.
  CanvasGradient - Является интерфейсом к градиенту заливки в пиксельном рисунке.
  Фигуры с градиентной заливкой, попадающие в область градиента, соответственно и окрашиваются.
  Экземпляр доступен:

  1. С помощью метода createLinearGradient объекта CanvasRenderingContext2D
  2. С помощью метода createRadialGradient объекта CanvasRenderingContext2D
  CanvasGradient методы.
  addColorStop - Выделяет в области градиента часть с заданным цветом.
  Возвращает значение undefined.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasGradient.addColorStop(Старт, Цвет)

Значения формата записи:

  Интерфейс CanvasPattern.
  CanvasPattern - Является интерфейсом к шаблону-изображению для заливки в пиксельном рисунке.
  Экземпляр доступен:

  1. С помощью метода createPattern объекта CanvasRenderingContext2D
  CanvasPattern методы.
  setTransform - Преобразует шаблон в соответствии с заданной матрицей линейного преобразования.
  Возвращает значение undefined.

Формат записи в коде скрипта:

  • Экземпляр объекта CanvasPattern.setTransform(Матрица)

Значения формата записи:

>
  Интерфейс TextMetrics.
  TextMetrics - Является интерфейсом к метрическим параметрам текста в пиксельном рисунке.
  Экземпляр доступен:

  1. С помощью метода measureText объекта CanvasRenderingContext2D
  TextMetrics свойства.
  height - Содержит высоту текста (не шрифта!) в пикселях.
  Значение имеет числовой формат.

Формат записи в коде скрипта:

  • Экземпляр объекта TextMetrics.height[= Значение]

Значения формата записи:

  width - Содержит ширину текста (не шрифта!) в пикселях.
  Значение имеет числовой формат.

Формат записи в коде скрипта:

  • Экземпляр объекта TextMetrics.width[= Значение]

Значения формата записи:

Сводная таблица методов
Имя метода Объект Функционал Возвращаемое значение
addColorStop CanvasGradient Выделяет в области градиента часть с заданным цветом. undefined
arc CanvasRenderingContext2D Рисует дугу окружности с заданным радиусом. undefined
arcTo CanvasRenderingContext2D Рисует дугу окружности между касаниями двух прямых. undefined
beginPath CanvasRenderingContext2D Начинает новый путь виртуального пера. undefined
bezierCurveTo CanvasRenderingContext2D Рисует кубическую кривую Безье. undefined
clearRect CanvasRenderingContext2D Очищает прямоугольную область. undefined
clip CanvasRenderingContext2D Завершает построение "маски" для рисунка. undefined
closePath CanvasRenderingContext2D Замыкает незамкнутую фигуру. undefined
createImageData CanvasRenderingContext2D Создает в памяти прямоугольную область с пиксельным изображением. Экземпляр объекта ImageData
createLinearGradient CanvasRenderingContext2D Формирует область линейного градиента на "холсте". Экземпляр объекта CanvasGradient
createPattern CanvasRenderingContext2D Создает шаблон рисунка для заливки. Экземпляр объекта CanvasPattern
createRadialGradient CanvasRenderingContext2D Формирует область радиального градиента на "холсте". Экземпляр объекта CanvasGradient
drawFocusIfNeeded CanvasRenderingContext2D Реагирует на фокуса ввода на холсте. undefined
drawImage CanvasRenderingContext2D Помещает на "холст" готовое изображение или его часть. undefined
ellipse CanvasRenderingContext2D Рисует дугу эллипса. undefined
fill CanvasRenderingContext2D Заливает все фигуры поддающиеся заливке. undefined
fillRect CanvasRenderingContext2D Рисует с заливкой прямоугольную область. undefined
fillText CanvasRenderingContext2D Рисует текст с заливкой символов. undefined
getImageData CanvasRenderingContext2D Получает образ "холста". Экземпляр объекта ImageData
getLineDash CanvasRenderingContext2D Возвращает параметры пунктирных линий на "холсте". Массив параметров
quadraticCurveTo CanvasRenderingContext2D Рисует квадратичную кривую Безье. undefined
isPointInPath CanvasRenderingContext2D Проверяет нахождение точки внутри или на контуре фигуры. Логическое значение
isPointInStroke CanvasRenderingContext2D Проверяет нахождение точки на контуре фигуры. Логическое значение
lineTo CanvasRenderingContext2D Рисует прямую линию. undefined
measureText CanvasRenderingContext2D Оценивает длину текстовой строки. Экземпляр объекта TextMetrics
moveTo CanvasRenderingContext2D Перемещает позицию виртуального пера в заданную точку. undefined
putImageData CanvasRenderingContext2D Отображает пиксельный рисунок, или его часть, на "холсте". undefined
rect CanvasRenderingContext2D Рисует полный контур прямоугольника. undefined
resetTransform CanvasRenderingContext2D Сбрасывает все изменения и трансформации системы координат на "холсте". undefined
restore CanvasRenderingContext2D Восстанавливает на "холсте" предварительно сохраненный рисунок. undefined
rotate CanvasRenderingContext2D Поворачивает систему координат "холста". undefined
save CanvasRenderingContext2D Сохраняет рисунок с "холста" в памяти. undefined
scale CanvasRenderingContext2D Масштабирует систему координат "холста". undefined
setLineDash CanvasRenderingContext2D Устанавливает или отменяет пунктирный стиль линий "холста". Массив параметров пунктира
setTransform CanvasRenderingContext2D Трансформирует виртуально рисунок на "холсте". undefined
setTransform CanvasPattern Трансформирует шаблон-изображение. undefined
stroke CanvasRenderingContext2D Обводит все поддающиеся обводке фигуры. undefined
strokeRect CanvasRenderingContext2D Рисует прямоугольную рамку. undefined
strokeText CanvasRenderingContext2D Рисует текст контуром символов. undefined
transform CanvasRenderingContext2D Трансформирует виртуально рисунок на "холсте". undefined
translate CanvasRenderingContext2D Смещает центр системы координат "холста". undefined

Сводная таблица свойств
Имя свойства Объект Содержание Тип значения
canvas CanvasRenderingContext2D Экземпляр объекта HTMLCanvasElement. Экземпляр объекта
data ImageData Пиксельное значение прямоугольного изображения. Массив
fillStyle CanvasRenderingContext2D Цвет, градиент, или узор для заливки фигур рисунка. Строковый формат
Экземпляр объекта
font CanvasRenderingContext2D Параметры шрифта текстов рисунка. Строковый формат
height ImageData Высота прямоугольного изображения. Числовой формат
height TextMetrics Высота текста. Числовой формат
globalAlpha CanvasRenderingContext2D Степень прозрачности фигур рисунка. Числовой формат
globalCompositeOperation CanvasRenderingContext2D Правила наложения фигур рисунка. Строковый формат
imageSmoothingEnabled CanvasRenderingContext2D Резкость фигур рисунка. Логический формат
lineCap CanvasRenderingContext2D Форма торцов линий рисунка. Строковый формат
lineDashOffset CanvasRenderingContext2D Смещение фазы пунктирных линий рисунка. Числовой формат
lineJoin CanvasRenderingContext2D Форма вершины внешнего угла соединения линий рисунка. Строковый формат
lineWidth CanvasRenderingContext2D Ширина линий рисунка. Числовой формат
miterLimit CanvasRenderingContext2D Лимит на длину угла соединения линий рисунка. Числовой формат
shadowBlur CanvasRenderingContext2D Уровень размытия теней фигур рисунка. Числовой формат
shadowColor CanvasRenderingContext2D Цвет теней фигур рисунка. Строковый формат
shadowOffsetX CanvasRenderingContext2D Горизонтальный размер выступа теней фигур рисунка. Числовой формат
shadowOffsetY CanvasRenderingContext2D Вертикальный размер выступа теней фигур рисунка. Числовой формат
strokeStyle CanvasRenderingContext2D Цвет, градиент, или узор для линий рисунка. Строковый формат
Экземпляр объекта
textAlign CanvasRenderingContext2D Правило горизонтального выравнивания текстов рисунка. Строковый формат
textBaseline CanvasRenderingContext2D Правило вертикального выравнивания строк текстов рисунка. Строковый формат
width ImageData Ширина прямоугольного изображения. Числовой формат
width TextMetrics Ширина текста. Числовой формат
Пример ■■■■■■■■■■►