Справочник Canvas

Элемент HTML5 <canvas> используется для рисования графики с помощью скриптов (чаще всего JavaScript). Однако сам по себе элемент <canvas> не имеет встроенных возможностей для рисования. Чтобы создать графику, необходимо использовать скрипт, так как <canvas> является лишь контейнером для графики.

Метод getContext() возвращает объект, содержащий свойства и методы для рисования на холсте.

Цвета, стили и тени

Property	Description
fillStyle	Устанавливает или возвращает цвет, градиент или узор, используемые для заливки фигур.
strokeStyle	Устанавливает или возвращает цвет, градиент или узор, используемые для обводки фигур.
shadowColor	Устанавливает или возвращает цвет теней.
shadowBlur	Устанавливает или возвращает уровень размытия теней.
shadowOffsetX	Устанавливает или возвращает смещение тени по оси X.
shadowOffsetY	Устанавливает или возвращает смещение тени по оси Y.

Method	Description
createLinearGradient()	Создает линейный градиент для использования на холсте.
createPattern()	Повторяет указанный элемент в заданном направлении.
createRadialGradient()	Создает круговой/радиальный градиент для использования на холсте.
addColorStop()	Определяет цвета и позиции остановок в объекте градиента.

Стили линий

Property	Description
lineCap	Устанавливает или возвращает стиль концов линии.
lineJoin	Устанавливает или возвращает тип соединяемых углов.
lineWidth	Устанавливает или возвращает ширину текущей линии.
miterLimit	Устанавливает или возвращает максимальную длину скоса.
lineDash	Устанавливает или возвращает массив чисел, задающих узор пунктирной линии.
lineDashOffset	Устанавливает или возвращает смещение для узора пунктирной линии.

Прямоугольники

Method	Description
rect()	Создает прямоугольники.
fillRect()	Рисует залитые прямоугольники.
strokeRect()	Рисует контуры прямоугольников.
clearRect()	Очищает указанные пиксели в заданном прямоугольнике.

Пути

Method	Description
fill()	Заливает текущие подпути текущим fillStyle.
stroke()	Обводит текущие подпути текущим strokeStyle.
beginPath()	Начинает новый путь или сбрасывает текущий путь.
moveTo()	Перемещает путь к заданной точке на холсте без рисования линии.
closePath()	Добавляет путь от текущей точки обратно к начальной.
lineTo()	Добавляет линию к текущему подпути.
clip()	Создает область отсечения на основе текущего пути.
quadraticCurveTo()	Добавляет квадратичную кривую Безье.
bezierCurveTo()	Добавляет кубическую кривую Безье.
arc()	Добавляет дугу/кривую для создания кругов или их частей.
arcTo()	Добавляет дугу/кривую между двумя касательными.
isPointInPath()	Определяет, находится ли указанная точка внутри текущего пути или нет.

Преобразования

Method	Description
scale()	Масштабирует текущий рисунок (увеличивает или уменьшает).
rotate()	Поворачивает текущий рисунок.
translate()	Изменяет систему координат холста.
transform()	Применяет матрицу преобразования к холсту.
setTransform()	Аналогичен transform(). Может использоваться для наклона, масштабирования и перемещения холста.

Текст

Property	Description
font	Устанавливает внешний вид текста, нарисованного на холсте.
textAlign	Устанавливает выравнивание текста на холсте.
textBaseline	Устанавливает вертикальное выравнивание текста на холсте.

Method	Description
fillText()	Добавляет текст на холст.
strokeText()	Добавляет обведенный текст на холст.
measureText()	Измеряет ширину текста.

Рисование изображений

Method	Description
drawImage()	Рисует изображение, видео или другой холст на текущем холсте.

Работа с пикселями

Property	Description
width	Возвращает ширину объекта ImageData.
height	Возвращает высоту объекта ImageData.
data	Возвращает массив Uint8ClampedArray, содержащий данные пикселей.

Method	Description
createImageData()	Создает новый объект ImageData.
getImageData()	Возвращает объект ImageData, содержащий копию данных пикселей для заданного прямоугольника.
putImageData()	Записывает данные изображения на холст из объекта ImageData.

Композитинг

Property	Description
globalAlpha	Устанавливает или возвращает текущее значение альфа-канала/прозрачности.
globalCompositeOperation	Устанавливает или возвращает тип операции композитинга при рисовании нового изображения.

Прочее

Method	Description
save()	Сохраняет текущее состояние контекста.
restore()	Восстанавливает состояние пути и атрибуты, сохраненные ранее.

Примечание: getContext() и toDataURL() являются методами самого элемента <canvas>, а не контекста рисования.

Practice