: Элемент графического холста

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

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

height

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

moz-opaque Нестандартный Устаревший

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

width

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

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

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

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

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

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

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

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

• Сценарии использования доступности холста
• Вопросы доступности элемента холста
• Доступность HTML холста в Firefox 13 — by Steve Faulkner
• Рекомендации по взаимодействию с элементами холста

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

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

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

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 холста
• Учебник по холсту
• OffscreenCanvas
• Справочник по холсту (2009)
• Справочник по холсту (pdf) (2015)
• Руководство по холсту HTML Safari от Apple (2013)
• CanvasRenderingContext2D контекст 2D отрисовки для элемента холста от Apple.com
• WebGL API
• <img>
• SVG
• Использование HTML аудио и видео