Canvas — HTML-элемент для рисования¶
Canvas (полное название — <canvas>) — элемент HTML5, предназначенный для программного рисования двумерной и трёхмерной графики с помощью скриптов, обычно на JavaScript. В отличие от векторных форматов SVG, содержимое canvas создаётся динамически пиксель за пикселем и не является частью DOM-дерева как отдельные объекты.
¶История и появление
Элемент <canvas> был впервые реализован компанией Apple в 2004 году для браузера Safari и использовался в веб-приложении Dashboard. В 2005 года Mozilla добавила поддержку canvas в Firefox, а стандарт был включён в спецификацию WHATWG Web Hypertext Application Technology Working Group. В 2006 году элемент появился в Opera, в 2007 — в Internet Explorer (начиная с версии 9). Стандарт стал частью HTML5 и в настоящее время поддерживается всеми современными браузерами.
¶Устройство и API
Canvas представляет собой прямоугольную область, задаваемую атрибутами width и height (по умолчанию 300×150 пикселей). Для рисования используется контекст рендеринга, получаемый методом getContext(). Основные типы контекстов:
2d— двумерная графика: линии, фигуры, текст, изображения, градиенты;webgl/webgl2— трёхмерная графика на базе OpenGL ES;bitmaprenderer— прямой вывод готовых растровых изображений.
Контекст 2d предоставляет набор методов для рисования: fillRect(), strokeRect(), arc(), lineTo(), moveTo(), drawImage(), fillText(), а также управление стилями — fillStyle, strokeStyle, lineWidth, font, globalAlpha, shadowColor.
¶Пример использования
``html <canvas id="myCanvas" width="400" height="300"></canvas> <script> const ctx = document.getElementById('myCanvas').getContext('2d'); ctx.fillStyle = 'blue'; ctx.fillRect(10, 10, 150, 100); ctx.beginPath(); ctx.arc(250, 150, 60, 0, Math.PI * 2); ctx.fillStyle = 'red'; ctx.fill(); </script> ``
¶Применение
Canvas применяется в широком спектре задач:
- Игры и анимации — покадровая отрисовка сцен, спрайтов, физики;
- Визуализация данных — построение графиков, диаграмм, интерактивных дашбордов (библиотеки Chart.js, D3.js);
- Обработка изображений — фильтры, композитинг, работа с пикселями через
getImageData()/putImageData(); - Рисовалки и графические редакторы — свободное рисование пером, кистью;
- Видео- и аудиовизуализация — анализ и отображение звукового сигнала;
- Генеративное искусство — алгоритмическое создание изображений;
- Распознавание и обработка жестов — в связке с камерой и библиотеками компьютерного зрения.
¶Ограничения
Содержимое canvas — растровое, поэтому при масштабировании изображение может терять чёткость. Элемент не хранит отдельные объекты: нарисованные фигуры нельзя выбрать или изменить по отдельности без полной перерисовки. Текст, нарисованный на canvas, не индексируется поисковыми системами и недоступен скринридерам, поэтому для доступности требуется дублировать информацию в HTML. Производительность рисования зависит от размера холста и сложности сцен; для сложных 3D-задач рекомендуется WebGL.
¶Альтернативы и дополнения
Для векторной интерактивной графики используется SVG, где каждый элемент является объектом DOM. Для трёхмерной графики поверх WebGL работают библиотеки Three.js, Babylon.js. Специфика OffscreenCanvas (HTML Living Standard) позволяет вынести рисование в Web Worker, разгрузив основной поток.
Исторически в русскоязычной разработке термин «холст» является калькой с английского canvas и используется как синоним самого элемента и области рисования.
Источники:
- MDN Web Docs — Canvas API: https://developer.mozilla.org/ru/docs/Web/API/Canvas_API
- Спецификация HTML Living Standard, раздел The canvas element: https://html.spec.whatwg.org/
- W3Schools — HTML5 Canvas: https://www.w3schools.com/html/html5_canvas.asp
- Книга Д. Флэнагана «JavaScript. Подробное руководство», 6-е издание