HTML-тег <canvas>

Характеристики

• Тип: медиа, блочный, статичный
• Назначение: Предоставляет область для рисования графики с помощью скриптов (обычно JavaScript).
• Родители: Любые HTML-теги, которые могут содержать встроенный контент.
• Потомки: Альтернативный контент для отображения, если браузер не поддерживает <canvas>.
• Глобальные атрибуты: все
• Атрибуты событий: все

Атрибуты

• width — Ширина области рисования (в пикселях).
• height — Высота области рисования (в пикселях).

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

<canvas id="myCanvas" width="200" height="100">
  Ваш браузер не поддерживает элемент <code>canvas</code>.
</canvas>

Использование в JavaScript

// Получение элемента <canvas>
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// Рисование прямоугольника
ctx.fillStyle = '#FF0000';
ctx.fillRect(0, 0, 200, 100);

Рекомендации по обеспечению доступности (a11y)

• Предоставляйте альтернативный контент внутри <canvas> для пользователей с ограниченными возможностями.
• Используйте ARIA-атрибуты или предоставляйте описания действий, происходящих на холсте.
• Обеспечьте фокусируемость и управление с клавиатуры, если <canvas> интерактивен.
• Графика на <canvas> может быть недоступна для пользователей экранных читалок.
• Отсутствие альтернативного контента снижает доступность для пользователей с неподдерживаемыми браузерами.

Полезные ссылки