Справочник Canvas

Элемент HTML5 <canvas> используется для рисования графики через скрипты (обычно JavaScript). Сам по себе элемент <canvas> — это просто пустой контейнер: рисование выполняется из скрипта.

Чтобы получить контекст рисования, вызовите метод getContext('2d') элемента. Он возвращает объект CanvasRenderingContext2D:

const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d'); // a CanvasRenderingContext2D
ctx.fillStyle = 'green';
ctx.fillRect(10, 10, 100, 80);

Почти все свойства и методы на этой странице принадлежат объекту 2D-контекста (ctx выше), а не элементу <canvas>. Исключения — getContext() и toDataURL(), которые принадлежат самому элементу <canvas>, а также свойства width/height/data в разделе Пиксельные операции, относящиеся к объектам ImageData. Они сгруппированы в отдельных разделах ниже.

Пошаговые руководства: Введение в Canvas, рисование фигур, координаты, текст и градиенты.

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

Смотрите руководство Canvas градиенты с рабочими примерами.

Стили линий

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

Пути

Трансформации

Смотрите Canvas координаты о том, как матрица преобразования сопоставляет позиции рисования с пикселями.

Текст

Смотрите руководство Canvas текст с полными примерами.

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

Пиксельные операции

Приведённые ниже свойства принадлежат объекту ImageData, возвращаемому методами createImageData() / getImageData(), а не элементу <canvas> или контексту.

Компоновка

Состояние canvas

Эти методы принадлежат 2D-контексту и позволяют сохранять и восстанавливать полное состояние рисования (стили, преобразования, область отсечения) в виде стека.

Элемент <canvas>

Следующие элементы принадлежат самому элементу <canvas>, а не 2D-контексту.

Практика