Атрибут `class` тега `<canvas>`

Описание

Атрибут class для элемента <canvas> позволяет назначать один или несколько CSS-классов для стилизации и управления холстом через JavaScript. Классы помогают группировать элементы и применять к ним общие стили.

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

<canvas class="drawing-area primary-canvas" width="500" height="300"></canvas> <style> .drawing-area { border: 1px solid #ccc; margin: 10px; } .primary-canvas { background-color: #f9f9f9; } </style>

Аспект	Описание	Особенности
Синтаксис	Пробел-разделенный список классов	class="class1 class2 class3"
Стилизация	Применение CSS-правил	Только к внешнему контейнеру
JavaScript	Доступ через classList API	add/remove/toggle/contains

Практические примеры:

1. Динамическое изменение классов:

<canvas id="interactiveCanvas" class="canvas-style" width="400" height="300"></canvas> <button onclick="toggleHighlight()">Подсветить</button> <script> function toggleHighlight() { const canvas = document.getElementById('interactiveCanvas'); canvas.classList.toggle('highlighted'); } </script> <style> .highlighted { box-shadow: 0 0 10px yellow; } </style>

2. Группировка canvas-элементов:

<canvas class="chart" id="chart1"></canvas> <canvas class="chart" id="chart2"></canvas> <script> // Применение настроек ко всем элементам с классом chart document.querySelectorAll('.chart').forEach(canvas => { canvas.width = 300; canvas.height = 200; }); </script>

Важные особенности:

Классы влияют только на внешний вид контейнера, не на само содержимое canvas
Для рисования внутри canvas используйте JavaScript API
Можно комбинировать с data-атрибутами для хранения информации
Поддерживается всеми современными браузерами

Атрибут class тега <canvas>