Canvas 2D — программируемая графика в браузере
Canvas 2D — это программный интерфейс и элемент HTML, который предоставляет разработчикам возможность динамического рисования двумерной графики непосредственно в браузере с использованием языка JavaScript, создавая растровое изображение на лету в пиксельной сетке, что позволяет реализовывать анимации, игры, визуализации данных, графические редакторы и любые другие приложения, требующие программного управления пикселями. Элемент canvas представляет собой прямоугольную область на веб-странице, внутри которой можно рисовать с помощью контекста рисования, который предоставляет обширный набор методов для создания геометрических фигур, таких как прямоугольники, окружности, дуги, кривые Безье и линии, а также для управления стилями, включая цвета, градиенты, тени, толщину линий и заливки. Canvas работает в пиксельной модели, где каждый рисунок является растровым изображением, которое после отрисовки не сохраняет информацию об отдельных объектах, что означает, что для обновления сцены необходимо перерисовывать всю область заново, что является как преимуществом, позволяющим создавать сложные эффекты смешивания пикселей, так и ограничением, требующим тщательного управления производительностью. Контекст рисования canvas поддерживает не только базовые операции рисования, но и трансформации, такие как поворот, масштабирование, перенос и аффинные преобразования, а также композитинг, определяющий, как новые пиксели смешиваются с уже существующими, что открывает широкие возможности для создания визуально насыщенных приложений. Canvas также позволяет загружать и отображать изображения, видео и другие canvas-элементы, а также считывать пиксельные данные для анализа или обработки изображений на уровне отдельных пикселей, что делает его мощным инструментом для манипуляции графикой. Основным преимуществом canvas является его высокая производительность для сцен с большим количеством объектов, поскольку все операции выполняются непосредственно на уровне пикселей без сохранения DOM-дерева, и он широко используется в индустрии для создания игр, научных визуализаций, систем мониторинга и интерактивных приложений, где важна скорость отрисовки и гибкость управления графикой.
См. также: Разработка графики — модель и цикл · Работа с HTML (DOM) · События · ResizeObserver · Применение JS в вебе · Web API в браузере
Задача
Программируемая графика в браузере — это совокупность технологий и подходов, которые позволяют разработчикам создавать, управлять и анимировать графическое содержимое на веб-страницах с использованием программного кода на JavaScript, обеспечивая динамическое и интерактивное визуальное представление данных без необходимости загрузки готовых изображений или использования внешних плагинов. Эта парадигма включает в себя несколько основных технологических стеков, среди которых наиболее значимыми являются Canvas 2D для растровой графики, SVG для масштабируемой векторной графики, WebGL для высокопроизводительной трехмерной графики с использованием аппаратного ускорения, а также CSS-анимации и трансформации для стилизации и движения DOM-элементов. Программируемая графика позволяет создавать приложения, которые реагируют на пользовательский ввод в реальном времени, анимируют данные, визуализируют сложные информационные структуры, реализуют игровую механику и предоставляют пользователям богатый интерактивный опыт, недоступный при использовании статических изображений. Ключевым преимуществом программируемой графики является возможность динамического изменения содержимого в зависимости от состояния приложения, данных от пользователя или внешних источников, что делает её идеальным инструментом для дашбордов, инфографики, симуляторов, научных приложений и любых других систем, где визуализация должна отражать текущее состояние данных. Современные браузеры предоставляют высокопроизводительные реализации всех графических API, использующие аппаратное ускорение графических процессоров и оптимизированные движки отрисовки, что позволяет создавать визуально сложные приложения с плавной анимацией и мгновенной обратной связью, сопоставимые по качеству с нативными приложениями. Программируемая графика в браузере является основой современной веб-разработки и продолжает активно развиваться, с появлением новых возможностей, таких как WebGPU, которые обещают еще более высокую производительность и контроль над графическим конвейером, открывая новые горизонты для веб-приложений, включая профессиональное 3D-моделирование, видеомонтаж и ресурсоемкие игры, ранее доступные только в виде нативных приложений.
Canvas — HTML-элемент, на котором JavaScript рисует растровую графику — диаграммы, простые игры, редакторы, превью изображений, анимации без тяжёлых библиотек.
Сценарий из учебной практики:
- В разметке —
<canvas width="400" height="300">. - В скрипте — контекст
getContext('2d'). - Рисование — методами
fillRect,stroke,drawImage,fillText. - Обновление кадра —
clearRectи перерисовка; для анимации —requestAnimationFrame.
Canvas — Web API, не часть ECMAScript. Для 3D используют WebGL; для векторной разметки в DOM — SVG.
Учебные фигуры на Canvas через библиотеку p5.js — квадрат, треугольник, цветок, фракталы, анимация — с построчным разбором в Примеры фигур на Processing/p5.js.
Те же фигуры векторной разметкой без Canvas — SVG — рисунки кодом (иконки, масштаб без потерь).
Теория API — ниже в этой статье; p5 — copy-paste в editor.p5js.org.
Ментальная модель «модель / update / render» и игровой цикл — 4.18 Разработка графики.
Web API — это широкий термин, обозначающий совокупность интерфейсов и спецификаций, предоставляемых браузерами и веб-платформой в целом, которые позволяют веб-приложениям взаимодействовать с различными функциями операционной системы, оборудования и окружения, включая графику, звук, сеть, файловую систему, датчики устройства и многие другие возможности, выходящие за рамки базового языка JavaScript. Web API разделяются на множество подкатегорий, среди которых важное место занимают графические API, такие как Canvas 2D, WebGL, WebGPU, SVG, а также CSS-объектная модель, которые предоставляют разные способы создания и управления визуальным содержимым в браузере в зависимости от конкретных требований к производительности, масштабируемости и сложности графики. В более узком смысле, особенно в контексте обсуждаемой темы, Web API часто относится именно к тем интерфейсам, которые предоставляют доступ к графическим возможностям браузера, включая получение контекста рисования для canvas, управление стилями через CSS, манипуляцию векторными изображениями через SVG и использование аппаратного ускорения через WebGL. Web API разрабатываются организациями по стандартизации, такими как W3C и WHATWG, и проходят через процесс спецификации, реализации в браузерах и тестирования на совместимость, прежде чем стать общедоступными и надежными для использования в производственных приложениях. Доступ к Web API в JavaScript обычно осуществляется через глобальные объекты, такие как window, document, navigator, а также через специализированные объекты, такие как CanvasRenderingContext2D, WebGLRenderingContext, SVGElement и другие, которые предоставляют методы и свойства для работы с конкретными функциями. Понимание и умение использовать Web API является ключевым навыком современного веб-разработчика, поскольку именно эти интерфейсы превращают статический HTML и CSS в полноценные интерактивные приложения, способные конкурировать с нативным программным обеспечением по функциональности и пользовательскому опыту.
SVG — это аббревиатура от Scalable Vector Graphics, что означает масштабируемую векторную графику, и представляет собой язык разметки на основе XML для описания двумерных векторных изображений, которые могут быть встроены непосредственно в HTML-документы и управляться через CSS и JavaScript, обеспечивая бесконечную масштабируемость без потери качества. В отличие от растровых форматов, таких как PNG или JPEG, которые хранят информацию о каждом пикселе, SVG хранит математические описания геометрических фигур, линий, кривых, текста и градиентов, что позволяет изображению идеально отображаться на любом экране с любым разрешением без пикселизации или искажений. Каждый элемент в SVG является DOM-узлом, что означает, что он может быть стилизован с помощью CSS, анимирован с помощью CSS-анимаций или JavaScript, реагировать на события мыши и касания, а также динамически изменяться или удаляться, что делает SVG мощным инструментом для создания интерактивных графических интерфейсов, иконок, логотипов, диаграмм и инфографики. В отличие от Canvas 2D, который работает как растровый холст и не сохраняет информацию об отдельных нарисованных объектах, SVG сохраняет каждый графический элемент в виде отдельного объекта в DOM-дереве, что обеспечивает простой доступ к каждому элементу для модификации, но при этом большое количество элементов может привести к снижению производительности из-за нагрузки на DOM. SVG поддерживает широкий набор геометрических примитивов, таких как прямоугольники, круги, эллипсы, линии, полилинии, многоугольники, а также сложные пути, составленные из кривых Безье и дуг, и предоставляет мощные возможности для создания градиентов, масок, фильтров, узоров и клиппинга, что позволяет создавать визуально сложные векторные иллюстрации. Благодаря своей масштабируемости, доступности и широкой поддержке во всех современных браузерах, SVG является предпочтительным форматом для иконок, логотипов и любой графики, которая должна выглядеть одинаково хорошо на всех устройствах и экранах, и активно используется в веб-разработке, особенно в сочетании с современными фреймворками, которые упрощают управление динамическими SVG-графиками и анимациями.
WebGL — это это аббревиатура от Web Graphics Library, представляющая собой программный интерфейс для рендеринга интерактивной двумерной и трехмерной графики в веб-браузерах без необходимости использования сторонних плагинов, который основан на стандарте OpenGL ES и предоставляет прямой доступ к графическому процессору через JavaScript, что позволяет достигать высокой производительности и создавать визуально насыщенные приложения. WebGL работает с использованием шейдеров — небольших программ, написанных на языке GLSL, которые выполняются непосредственно на графическом процессоре и позволяют контролировать каждый этап графического конвейера, включая преобразование вершин, растеризацию и попиксельную обработку, что дает разработчикам беспрецедентный уровень контроля над визуальным выводом. В отличие от Canvas 2D и SVG, которые используют центральный процессор для отрисовки, WebGL использует аппаратное ускорение графического процессора, что делает его идеальным выбором для ресурсоемких приложений, таких как трехмерные игры, визуализация больших объемов данных, моделирование физических процессов, виртуальная реальность и профессиональное моделирование. WebGL работает в контексте элемента canvas, но использует специализированный контекст, который предоставляет доступ к низкоуровневым операциям работы с буферами, текстурами, фреймбуферами и шейдерами, и требует от разработчика более глубокого понимания компьютерной графики и линейной алгебры по сравнению с более высокоуровневыми API. С момента появления WebGL прошел два основных этапа развития, причем WebGL 2 внес значительные улучшения, включая поддержку большего количества расширенных возможностей OpenGL ES 3.0, таких как текстуры 3D, тесселяция, множественные цели рендеринга и более гибкие форматы данных, что расширило спектр приложений, которые могут быть реализованы в браузере. WebGL является фундаментом для множества высокоуровневых библиотек и фреймворков, таких как Three.js, Babylon.js, PlayCanvas и Unity, которые абстрагируют сложность низкоуровневого программирования и позволяют разработчикам создавать впечатляющие трехмерные приложения без необходимости писать шейдеры и управлять буферами вручную.
Разметка и контекст
<canvas id="chart" width="400" height="300">
<p>Ваш браузер не поддерживает canvas</p>
</canvas>
| Атрибут | Роль |
|---|---|
width, height | внутренний размер буфера в пикселях (по умолчанию 300×150) |
| Содержимое внутри тега | fallback для старых браузеров |
const canvas = document.getElementById('chart');
const ctx = canvas.getContext('2d');
console.log(ctx.canvas === canvas); // true
console.log(canvas.width, canvas.height);
Контекст CanvasRenderingContext2D (ctx) — единая точка входа — цвета, линии, пути, текст, картинки. Свойство ctx.canvas возвращает элемент <canvas>.
Если задать canvas { width: 800px; height: 600px; }, а атрибуты width="400" height="300", браузер растянет bitmap — картинка будет размытой.
Для Retina умножайте атрибуты на devicePixelRatio или синхронизируйте размеры в ResizeObserver.
Система координат
Система координат — это фундаментальное математическое понятие, используемое в компьютерной графике и веб-технологиях для определения положения точек, размеров объектов и ориентации элементов на экране, которое в контексте браузерных графических API, таких как Canvas, SVG и WebGL, определяет, как координаты интерпретируются и преобразуются при отрисовке. В большинстве двумерных графических API, включая Canvas 2D и SVG, используется левосторонняя декартова система координат, где начало координат с координатами (0,0) находится в левом верхнем углу области рисования, ось X направлена вправо, увеличивая значения, а ось Y направлена вниз, что противоположно традиционной математической системе, где ось Y направлена вверх, и это различие важно учитывать при разработке графических приложений. Система координат в браузере обычно измеряется в пикселях, хотя в SVG может также использоваться множество других единиц измерения, таких как проценты, миллиметры или пользовательские единицы, и эта гибкость позволяет создавать адаптивную графику, которая корректно отображается на экранах с разной плотностью пикселей и размерами. В контексте трансформаций, таких как поворот, масштабирование и перенос, система координат может быть модифицирована с помощью матриц преобразований, которые изменяют интерпретацию координат для последующих операций рисования, что позволяет создавать сложные иерархические анимации и компоновать сцены без пересчета координат каждого элемента вручную. В трехмерных API, таких как WebGL, система координат становится трехмерной с добавлением оси Z, которая представляет глубину, и включает дополнительные концепции, такие как система координат объекта, мировая система координат и система координат камеры, каждая из которых служит своей цели на разных этапах графического конвейера. Понимание системы координат является критически важным для всех операций рисования, поскольку неправильная интерпретация положения и ориентации объектов приводит к искажениям, смещениям и неожиданному поведению, и опытные разработчики всегда четко осознают, в какой системе координат они работают и как преобразования влияют на их графическое содержимое.
- Начало координат — левый верхний угол холста.
- Ось X растёт вправо, Y — вниз.
- Единица — пиксель внутреннего буфера (не CSS-пиксель при масштабировании).
Углы для arc() задают в радианах:
const degrees = 90;
const radians = (Math.PI / 180) * degrees;
Заливка, контур, прямоугольники
| Свойство | Назначение |
|---|---|
fillStyle | цвет или градиент заливки (по умолчанию #000) |
strokeStyle | цвет контура |
lineWidth | толщина линии (px) |
lineCap | 'butt', 'round', 'square' |
lineJoin | 'miter', 'bevel', 'round' |
globalAlpha | прозрачность 0.0–1.0 для следующих операций |
| Метод | Назначение |
|---|---|
fillRect(x, y, w, h) | залитый прямоугольник |
strokeRect(x, y, w, h) | контур прямоугольника |
clearRect(x, y, w, h) | очистить область (прозрачный фон) |
ctx.fillStyle = 'rgb(0, 0, 255)';
ctx.fillRect(50, 50, 200, 200);
ctx.fillStyle = 'rgba(255, 0, 0, 0.5)';
ctx.fillRect(100, 100, 150, 150);
ctx.strokeStyle = 'rgb(0, 0, 255)';
ctx.lineWidth = 3;
ctx.strokeRect(50, 50, 200, 200);
ctx.clearRect(0, 0, canvas.width, canvas.height);
Цвета — в любом формате CSS — 'red', '#ff0000', 'rgb(...)', 'rgba(...)'.
Пути — линии, дуги, фигуры
Пути — это фундаментальная концепция в двумерной компьютерной графике, представляющая собой последовательность геометрических примитивов, таких как точки, линии, дуги и кривые, которые вместе образуют контур или форму, которая может быть обведена, залита или использована в качестве области отсечения в таких API, как Canvas 2D и SVG. Путь в Canvas создается с помощью последовательности методов, таких как moveTo для перемещения в начальную точку без рисования, lineTo для проведения прямой линии к новой точке, arc для рисования дуги или окружности, quadraticCurveTo и bezierCurveTo для создания кривых Безье, и closePath для замыкания контура, возвращаясь в начальную точку, причем все эти операции накапливаются в текущем пути, но не отображаются на холсте до вызова методов stroke или fill. Пути могут быть как открытыми, когда начальная и конечная точки не соединены, например, в линиях, так и закрытыми, когда последняя точка соединена с первой, создавая замкнутую область, что определяет, будет ли область внутри контура залита, и как обрабатываются обводки в углах. Сложные пути могут состоять из нескольких подпутей, которые могут перекрываться и создавать сложные составные формы, причем правила заливки, такие как правило ненулевого индекса или правило четности, определяют, какие области считаются внутри фигуры при пересечении подпутей, что позволяет создавать отверстия и сложные формы. В контексте интерактивной графики пути используются не только для рисования, но и для определения областей для проверки попадания точки или мыши на фигуру, что называется hit-testing, а также для создания областей отсечения, ограничивающих область рисования последующих графических операций. Пути также могут быть преобразованы с помощью матриц трансформации, что позволяет перемещать, масштабировать или поворачивать сложные формы без необходимости перестраивать их координаты вручную, и эти трансформации применяются ко всем точкам пути перед отрисовкой.
Сложные фигуры строят контуром (path):
| Метод | Назначение |
|---|---|
beginPath() | начать новый контур |
moveTo(x, y) | перенести "перо", не рисуя |
lineTo(x, y) | отрезок от текущей точки |
arc(x, y, r, start, end, counterclockwise?) | дуга / окружность |
arcTo(x1, y1, x2, y2, radius) | дуга через опорные точки |
quadraticCurveTo(cpx, cpy, x, y) | квадратичная кривая Безье |
bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y) | кубическая кривая Безье |
rect(x, y, w, h) | добавить прямоугольник к пути |
closePath() | замкнуть контур |
fill() / stroke() | залить или обвести текущий путь |
clip() | маска по контуру — дальнейшая отрисовка только внутри |
Код ITЗагрузка примера кода…
Пунктир — setLineDash([15, 10]), смещение — lineDashOffset. Сброс — setLineDash([]).
Текст
| Свойство / метод | Назначение |
|---|---|
font | строка как в CSS ('bold 16px Verdana') |
textAlign | 'left', 'right', 'center', 'start', 'end' |
textBaseline | 'top', 'middle', 'bottom', 'alphabetic', … |
fillText(text, x, y [, maxWidth]) | залитый текст |
strokeText(text, x, y [, maxWidth]) | контурный текст |
measureText(text).width | ширина строки в px |
ctx.font = 'italic 16pt Verdana';
ctx.fillStyle = 'blue';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText('JavaScript', canvas.width / 2, canvas.height / 2);
Изображения — drawImage
Источник — HTMLImageElement, другой <canvas>, <video> или new Image() после загрузки.
const img = new Image();
img.onload = () => {
ctx.drawImage(img, 0, 0); // целиком в (0,0)
ctx.drawImage(img, 0, 0, 200, 100); // масштаб в w×h
ctx.drawImage(img, sx, sy, sw, sh, dx, dy, dw, dh); // фрагмент → область
};
img.src = 'photo.jpg';
До события load рисовать нельзя — bitmap пустой. Для <img id="photo"> в DOM достаточно drawImage(document.getElementById('photo'), 0, 0).
Градиенты и текстуры
Линейный градиент:
const lg = ctx.createLinearGradient(0, 0, 200, 0);
lg.addColorStop(0, 'black');
lg.addColorStop(0.5, 'rgba(0, 0, 255, 0.5)');
lg.addColorStop(1, '#ff0000');
ctx.fillStyle = lg;
ctx.fillRect(0, 0, 200, 100);
Радиальный: createRadialGradient(x0, y0, r0, x1, y1, r1) + те же addColorStop.
Паттерн (текстура): createPattern(image, 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat') → присвоить fillStyle или strokeStyle.
Сохранение состояния и трансформации
Сохранение состояния — это важный механизм, доступный в графических API, таких как Canvas 2D, который позволяет временно сохранять текущую конфигурацию графического контекста, включая все настройки стилей, трансформации, области отсечения и другие параметры, а затем восстанавливать сохраненное состояние в любой момент, что упрощает управление сложными сценами и предотвращает нежелательные взаимодействия между различными частями кода. Состояние контекста включает в себя множество атрибутов, таких как цвет заливки и обводки, толщина и стиль линии, тени, составной режим, текущая матрица трансформации, область отсечения, настройки текста, включая шрифт, выравнивание и базовую линию, а также другие специфические параметры, которые влияют на все последующие операции рисования. При сохранении состояния, обычно выполняемом методом save, создается копия текущего состояния, которая помещается в стек состояний, а затем, после выполнения серии операций рисования с измененными параметрами, метод restore восстанавливает последнее сохраненное состояние из стека, возвращая контекст к предыдущей конфигурации без необходимости вручную сбрасывать каждый измененный атрибут. Использование сохранения и восстановления состояния является фундаментальной практикой при создании сложных сцен, особенно при рисовании множества объектов с различными стилями, поскольку оно позволяет изолировать стили и трансформации для каждого объекта, делая код более чистым, модульным и менее подверженным ошибкам, когда изменения в одном объекте случайно влияют на другие. Стек состояний в Canvas обычно имеет ограниченную глубину, но она достаточна для большинства практических задач, и важно всегда балансировать количество вызовов save и restore, чтобы избежать переполнения стека или потери управления над состоянием контекста. Этот механизм также особенно полезен при работе с рекурсивными или иерархическими структурами, такими как деревья или сцены с вложенными объектами, где каждый уровень требует своей конфигурации графического контекста, которая должна быть временно применена, а затем восстановлена после обработки подчиненного элемента.
save() кладёт в стек текущие стили, трансформации и clip; restore() возвращает предыдущие.
| Метод | Назначение |
|---|---|
translate(tx, ty) | сдвиг начала координат |
rotate(angle) | поворот (радианы), вокруг текущего origin |
scale(sx, sy) | масштаб по осям |
ctx.save();
ctx.translate(200, 150);
for (let i = 0; i < 3; i++) {
ctx.rotate(Math.PI / 6);
ctx.strokeRect(-50, -50, 100, 100);
}
ctx.restore();
Без save/restore трансформации накапливаются — типичный источник "уплывшей" графики.
Наложение, тени, прозрачность
| Свойство | Назначение |
|---|---|
globalCompositeOperation | режим смешивания ('source-over', 'destination-over', 'lighter', 'xor', …) |
globalAlpha | общая прозрачность следующих фигур |
shadowOffsetX, shadowOffsetY | смещение тени |
shadowBlur | размытие |
shadowColor | цвет тени |
Тень применяется к следующим операциям рисования (fill, stroke, fillText).
Пиксели — ImageData
| Метод | Назначение |
|---|---|
getImageData(x, y, w, h) | снять фрагмент bitmap |
createImageData(w, h) | пустой буфер |
putImageData(data, x, y) | вывести буфер на холст |
Массив imageData.data — последовательность RGBA байт (0–255) по строкам — [R, G, B, A, R, G, B, A, …].
const imageData = ctx.createImageData(100, 100);
const { data } = imageData;
for (let i = 0; i < data.length; i += 4) {
data[i] = 255; // R
data[i + 1] = 0; // G
data[i + 2] = 0; // B
data[i + 3] = 255; // A
}
ctx.putImageData(imageData, 0, 0);
Подходит для фильтров и процедурной генерации; для обычных диаграмм чаще хватает path API.
Клики и hit-testing
Hit-testing — это термин, обозначающий процесс определения, находится ли указатель, например, курсор мыши или палец на сенсорном экране, в пределах определенного графического элемента или области на холсте, и является ключевым механизмом для создания интерактивных графических приложений, позволяющих пользователям взаимодействовать с нарисованными объектами. В контексте Canvas 2D, где объекты не сохраняются как отдельные элементы DOM, hit-testing требует ручной реализации, которая обычно включает в себя сравнение координат указателя с геометрическими параметрами каждого объекта, либо использование математических методов проверки принадлежности точки фигуре, таких как проверка попадания в прямоугольник, окружность или сложный путь с помощью алгоритма точки в полигоне. Существует несколько подходов к реализации hit-testing: геометрический подход, где координаты указателя проверяются на принадлежность к каждому объекту с использованием его положения, размера и формы, что требует знания геометрии объекта, и пиксельный подход, который использует скрытый canvas для отрисовки объектов с уникальными цветовыми идентификаторами и затем проверяет цвет пикселя под указателем, что позволяет определить объект без явных вычислений пересечений. Пиксельный подход, хотя и требует дополнительной памяти и времени на отрисовку, часто оказывается более простым в реализации для сложных форм и составных объектов, поскольку он делегирует определение принадлежности графическому движку и не требует сложных математических вычислений. Для оптимизации производительности hit-testing при большом количестве объектов используются различные алгоритмы пространственного разделения, такие как квадродеревья или сетки, которые уменьшают количество проверяемых объектов, а также применяются методы грубой отсевающей проверки, где сначала проверяется попадание в ограничивающий прямоугольник, и только затем выполняется более точная проверка для сложных форм. В более высокоуровневых библиотеках и фреймворках, построенных поверх Canvas, hit-testing часто реализован автоматически и предоставляется через простые события или методы, абстрагируя разработчика от сложностей реализации, но понимание основ hit-testing необходимо для эффективной отладки, оптимизации и создания пользовательских интерактивных элементов.
Метод isPointInPath(x, y) проверяет, попадает ли точка в текущий контур — основа выбора фигур мышью.
canvas.addEventListener('click', (event) => {
const rect = canvas.getBoundingClientRect();
const x = event.clientX - rect.left;
const y = event.clientY - rect.top;
// при CSS-масштабе умножьте на canvas.width / rect.width
ctx.beginPath();
ctx.arc(100, 100, 40, 0, Math.PI * 2);
if (ctx.isPointInPath(x, y)) {
console.log('Попали в круг');
}
});
Координаты события — в CSS-пикселях относительно элемента; при несовпадении с canvas.width нужно масштабировать.
Анимация и перерисовка
function loop(timestamp) {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawFrame(timestamp);
requestAnimationFrame(loop);
}
requestAnimationFrame(loop);
requestAnimationFrame синхронизирует кадры с частотой экрана и ставит на паузу во вкладке в фоне. Для графиков в flex-layout пересчитывайте размеры в ResizeObserver.
Canvas, SVG и WebGL
| Технология | Когда выбирать |
|---|---|
| Canvas 2D | много пикселей, анимация, игры, растровые эффекты |
| p5.js | учебные скетчи, творческое кодирование — галерея фигур |
| SVG | масштабируемая векторная графика, доступность, CSS к фигурам |
| WebGL | 3D, тяжёлая GPU-графика |
Краткий пример в справочнике BOM — 22.md, графика Canvas; DOM и события — Работа с HTML в JavaScript, События и обработка событий в браузере.
Частые ошибки
| Ошибка | Что делать |
|---|---|
Рисование до img.onload | ждать загрузки или decode() |
| Размытый холст на Retina | синхронизировать width/height с devicePixelRatio |
| "Уехали" координаты | оборачивать трансформации в save/restore |
Нет beginPath() между фигурами | контуры сливаются — начинать путь заново |
isPointInPath без учёта CSS-размера | масштабировать координаты клика |