<canvas> Элемент canvas для графики HTML

Используйте <canvas> вместе с API Canvas для скриптов или API WebGL, чтобы рисовать графику и анимацию.

Атрибуты

Атрибуты этого элемента включают глобальные атрибуты.

height

Высота координатного пространства в пикселях CSS. По умолчанию равна 150.

moz-opaque

Сообщает canvas, будет ли использоваться прозрачность. Если canvas известно, что прозрачности нет, производительность отрисовки можно оптимизировать. Этот атрибут поддерживается только браузерами на основе Mozilla; вместо него используйте стандартизированный canvas.getContext('2d', { alpha: false }).

width

Ширина координатного пространства в пикселях CSS. По умолчанию равна 300.

Примечания по использованию

Альтернативное содержимое

Внутри блока <canvas> следует указать альтернативное содержимое. Оно будет отображаться в старых браузерах, не поддерживающих canvas, а также в браузерах с отключённым JavaScript.

Закрывающий тег </canvas>

В отличие от элемента <img>, элемент <canvas> требует закрывающего тега (</canvas>).

Изменение размера canvas с помощью CSS и HTML

Отображаемый размер canvas можно изменить с помощью CSS, но в этом случае изображение масштабируется при отрисовке в соответствии с заданным стилями размером, что может привести к искажению итоговой графики.

Лучше задать размеры canvas, установив атрибуты width и height непосредственно для элементов <canvas> — либо прямо в HTML, либо с помощью JavaScript.

Максимальный размер canvas

Точный максимальный размер элемента <canvas> зависит от браузера и среды. Хотя в большинстве случаев максимальные размеры превышают 10 000 x 10 000 пикселей, устройства iOS ограничивают размер canvas значением 4 096 x 4 096 пикселей. См. ограничения размера canvas в разных браузерах и устройствах.

Использование внеэкранного canvas

Canvas можно отрисовать с помощью API OffscreenCanvas, который отделяет документ от canvas. Преимущество в том, что отрисовкой canvas может заниматься поток worker, поэтому операции с canvas не блокируют основной поток веб-приложения. Благодаря распараллеливанию работы другие элементы интерфейса веб-приложения останутся отзывчивыми, даже если вы выполняете сложную графическую обработку во внеэкранном canvas. Дополнительные сведения см. в документации по API OffscreenCanvas.

Доступность

Альтернативное содержимое

Элемент <canvas> сам по себе является лишь растровым изображением и не предоставляет информации о нарисованных объектах. Содержимое canvas не доступно вспомогательным технологиям так же, как семантический HTML. В целом следует избегать использования canvas на доступных веб-сайтах и в приложениях. Сделать его более доступным помогут следующие руководства.

• Примеры использования canvas с учётом доступности
• Проблемы доступности элемента canvas
• Рекомендации по использованию интерактивных элементов canvas

Примеры

HTML

Этот фрагмент кода добавляет элемент canvas в HTML-документ. Если браузер не может прочитать или отобразить canvas, будет показан резервный текст.

<canvas width="120" height="120">
  An alternative text describing what your canvas displays.
</canvas>

JavaScript

Затем в коде JavaScript вызовите HTMLCanvasElement.getContext(), чтобы получить контекст рисования и начать рисовать на canvas:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
// Add a rectangle at (10, 10) with size 100x100 pixels
ctx.fillRect(10, 10, 100, 100);

Результат

Техническая сводка

Спецификации

Совместимость с браузерами

См. также

• API Canvas
• Руководство по Canvas
• OffscreenCanvas
• Шпаргалка по Canvas (2009)
• Шпаргалка по Canvas (PDF) (2015)
• Руководство по HTML canvas для Safari от Apple (2013)
• CanvasRenderingContext2D Контекст двумерного рисования для элемента canvas от Apple.com
• WebGL API
• <img>
• SVG
• Видео и аудио в HTML