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

Описание

Атрибут hidden позволяет скрыть элемент <canvas> от отображения на странице. В отличие от CSS-свойств, этот атрибут полностью удаляет элемент из визуального потока и accessibility tree.

Пример использования:
<canvas id="offscreenCanvas" width="500" height="300" hidden></canvas> <canvas id="visibleCanvas" width="500" height="300"></canvas> <script> // Использование скрытого canvas для предварительной отрисовки const offscreen = document.getElementById('offscreenCanvas'); const visible = document.getElementById('visibleCanvas'); const offCtx = offscreen.getContext('2d'); offCtx.fillStyle = 'blue'; offCtx.fillRect(0, 0, 500, 300); // Копирование на видимый canvas visible.getContext('2d').drawImage(offscreen, 0, 0); </script>
Аспект Поведение Сравнение с CSS
Отображение Полностью скрывает элемент Эквивалентно display: none
Доступность Удаляет из accessibility tree Скринридеры игнорируют
Производительность Отрисовка продолжается Анимации работают в фоне

Практические сценарии использования:

1. Оффскринный рендеринг:
<canvas id="buffer" width="800" height="600" hidden></canvas> <script> // Создание сложной графики в фоне const buffer = document.getElementById('buffer'); const ctx = buffer.getContext('2d'); // Трудоемкие операции отрисовки... renderComplexScene(ctx); // Показ по готовности buffer.removeAttribute('hidden'); </script>
2. Переключение видимости:
<canvas id="toggleCanvas" width="200" height="200"></canvas> <button onclick="toggleCanvas()">Переключить видимость</button> <script> function toggleCanvas() { const canvas = document.getElementById('toggleCanvas'); canvas.hidden = !canvas.hidden; } </script>

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

  • Скрытый canvas продолжает занимать память
  • Можно использовать для предварительного рендеринга
  • Не влияет на работу WebGL-контекста
  • Для временного скрытия лучше чем CSS (семантика)

Рекомендации:

  • Используйте для фоновых вычислений и рендеринга
  • Очищайте скрытые canvas при долгом неиспользовании
  • Для анимаций в фоне учитывайте нагрузку на CPU
  • Сочетайте с visibility: hidden для сложных сценариев
Предупреждение: Скрытый canvas с активными анимациями продолжает потреблять ресурсы. Останавливайте анимации при скрытии, если они не нужны.

Примечание: Атрибут hidden идеален для управления видимостью canvas на уровне DOM, но не освобождает графические ресурсы. Для полной остановки рендеринга используйте дополнительные методы (cancelAnimationFrame и т.д.).