<canvas> – Елемент полотна графіки

Елемент HTML <canvas> (полотно) слід використовувати для малювання графіки та анімацій, або вкупі з API сценаріїв полотна, або з API WebGL.

Атрибути

Цей елемент, крім перелічених нижче, приймає глобальні атрибути.

height

Висота координатного простору в пікселях CSS. Усталено – 150.

moz-opaque

Дозволяє полотну знати, чи буде фактором прозорість. Якщо полотно знає, що прозорості немає, то можна оптимізувати продуктивність малювання. Це підтримується лише браузерами на основі Mozilla; замість цього атрибута використовуйте стандартизований виклик методу canvas.getContext('2d', { alpha: false }).

width

Ширина координатного простору в пікселях CSS. Усталено – 300.

Примітки щодо використання

Альтернативний вміст

Усередині блоку <canvas> слід надати альтернативний вміст. Цей вміст буде візуалізовано як в старіших браузерах, що не підтримують полотна, так і в браузерах з вимкненим JavaScript.

Кінцевий тег </canvas>

На відміну від елемента <img>, елемент <canvas> вимагає кінцевого тега (</canvas>).

Розмір полотна за допомогою CSS або HTML

Виведений розмір полотна можна змінити за допомогою CSS, але якщо це зробити, то зображення буде масштабовано під час візуалізації, щоб вписатися в стилізований розмір, що може зробити остаточне візуалізоване зображення спотвореним.

Краще задавати розміри полотна, задаючи атрибути width і height безпосередньо для елементів <canvas>, або безпосередньо в HTML, або за допомогою JavaScript.

Максимальний розмір полотна

Точний максимальний розмір елемента <canvas> залежить від браузера та оточення. Попри те, що в більшості випадків максимальні розміри перевищують 10 000 x 10 000 пікселів, наприклад, пристрої iOS обмежують розмір полотна лише 4096 x 4096 пікселів. Дивіться обмеження розміру полотна в різних браузерах та пристроях.

[!NOTE] Перевищення максимальних розмірів або площі робить полотно непридатним для використання: команди малювання не працюватимуть.

Застосування позаекранного полотна

Полотно може бути візуалізовано за допомогою API OffscreenCanvas, в якому документ і полотно – розділені. Перевага такого підходу – те, що візуалізацією полотна може зайнятися воркерний потік, а головний потік вебзастосунку не блокується операціями з полотном. Завдяки паралелізації роботи решта елементів інтерфейсу вебзастосунку надалі будуть реагувати, навіть коли на позаекранному полотні виконуються складні графічні операції. Більше інформації – в документації API OffscreenCanvas.

Доступність

Альтернативний вміст

Елемент <canvas> сам по собі є лише бітовим зображенням і не надає інформації про будь-які намальовані об'єкти. Вміст полотна не відображається в інструментах доступності, як це відбувається з семантичним HTML. Загалом, слід уникати використання полотен у доступних вебсайтах та застосунках. Наступні посібники можуть допомогти зробити полотно більш доступним.

• Ситуації для застосування доступності полотен
• Проблеми доступності елемента полотна
• Доступність полотна HTML у Firefox 13 – від Стіва Фолкнера
• Найкращі практики інтерактивних елементів полотна

Приклади

HTML

Цей фрагмент коду додає елемент полотна до HTML-документа. Надається запасний текст, на випадок, якщо браузер не може прочитати або візуалізувати полотно.

<canvas width="120" height="120">
  Альтернативний текст, що описує те, що показує полотно.
</canvas>

JavaScript

Потім, у коді JavaScript, викликається HTMLCanvasElement.getContext(), щоб отримати контекст малювання та почати малювати на полотні:

const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
// Додати на (10, 10) прямокутник з розмірами 100x100 пікселів
ctx.fillRect(10, 10, 100, 100);

Результат

Технічний підсумок

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

Сумісність із браузерами

Дивіться також

• API полотен
• Підручник з полотен
• OffscreenCanvas
• Шпаргалка з полотен (2009)
• Шпаргалка з полотен (pdf) (2015)
• Посібник з полотен HTML у Safari від Apple (2013)
• Двовимірний контекст малювання CanvasRenderingContext2D для елемента полотна від Apple.com
• API WebGL
• <img>
• SVG
• Використання аудіо та відео HTML