HTML-in-Canvas в Chrome 157: интерактивная DOM в 2D, WebGL и WebGPU

Natalia Markoborodova

Дата публикации: 26 октября 2026 г.

После успешного тестирования в Chrome 157 официально выпущен стабильный релиз HTML-in-Canvas API. HTML-in-Canvas API позволяет объединить интерактивность и доступность DOM с высокой производительностью и возможностью управления на уровне пикселей, которые предлагает <canvas>. Этот API сочетает в себе широкие возможности браузера и графику Canvas с ускорением графического процессора.

Canvas или DOM?

Раньше при создании веб-приложений с высокими требованиями к визуальной составляющей приходилось выбирать между стандартными элементами HTML и необработанными контекстами холста.

До HTML-in-Canvas

До появления этого API при создании интерфейсов с большим количеством холстов приходилось выбирать между двумя подходами, каждый из которых имел свои недостатки:

1. Отрисовка текста непосредственно в виде пикселей холста (fillText()). Приложения рисовали текст и элементы управления пользовательского интерфейса в виде необработанных пикселей. У этого подхода были следующие недостатки:
   • Проблемы со специальными возможностями. Программы чтения с экрана и вспомогательные инструменты не могут считывать пиксели холста, если вы вручную не создадите и не синхронизируете невидимую резервную DOM.
   • Недоступность функций браузера. Пользователи не могут выполнять поиск по странице (Ctrl/Cmd + F), копировать и вставлять текст, открывать контекстные меню, а также использовать встроенные функции перевода и проверки правописания.
   • Сложные типографические движки. Для поддержки интернационализации требуется объединение больших движков макетов JavaScript.
2. Плавающие оверлеи HTML поверх холста. Например, можно использовать библиотеки, которые размещают стандартные элементы HTML поверх холста, вычисляя ограничивающие рамки и матричные преобразования в JavaScript. Недостатки этого подхода:
   • Задержка синхронизации и визуальные разрывы. При прокрутке, масштабировании или перемещении камеры в 3D-режиме элементы DOM наложения могут смещаться или дрожать относительно пикселей холста из-за разницы во времени формирования кадра.
   • Ограничения, связанные с обрезкой и порядком наложения. Оверлеи HTML всегда располагаются поверх всего буфера холста. Встраивать HTML-код внутрь 3D-сцены (например, за 3D-объектом, внутри стеклянного материала или в отражении зеркала) было невозможно без сложных обходных путей с использованием iframe-to-image.
   • Снижение производительности. Чтобы оверлеи не смещались относительно холста, вам нужно пересчитывать преобразование каждого оверлея в JavaScript и записывать его в style.transform для каждого кадра. Затем браузер анализирует каждую строку и пересчитывает стиль элемента, прежде чем отрисовать фрейм. Таким образом, с каждым добавленным оверлеем нагрузка на основной поток возрастает. В 2D-контексте drawElementImage() обновляет положение элемента. В WebGL и WebGPU вы передаете рассчитанное преобразование в updateElementGeometry() в виде матрицы. В любом случае браузер не анализирует CSS и не пересчитывает стили.

Основные преимущества HTML-in-Canvas

HTML-in-Canvas устраняет эти недостатки. Если поместить HTML-код в элемент <canvas>, контент останется интерактивным, а все интеграции браузера будут работать автоматически.

HTML-контент, который обрабатывается внутри тега <canvas>, имеет те же возможности, что и HTML-контент за пределами этого тега<canvas>:

• Макет и форматирование текста. Поддержка макета и форматирования текста, включая многострочный или двунаправленный текст с примененными стилями CSS.
• Элементы управления формами. Выразительные элементы управления формами с широкими возможностями настройки CSS и шейдеров.
• Выделение, копирование и вставка текста, а также нажатие правой кнопкой мыши. Пользователи могут выделять текст в 3D-сценах или открывать контекстные меню.
• Специальные возможности. HTML-контент, отображаемый внутри холста, доступен для программ чтения с экрана.
• Интеграция с функциями браузера. Такие функции браузера, как перевод, автозаполнение и поиск на странице, работают по умолчанию. Пользователи могут переводить или искать текст в текстурах WebGL и WebGPU.
• Интеграция расширений. Расширения браузера работают с контентом. Например, расширение для замены текста автоматически обновляет текст, отображаемый на 3D-сетках.
• Интеграция с инструментами разработчика Chrome. Проверяйте и настраивайте стили CSS для элементов интерфейса Canvas прямо в инструментах разработчика Chrome.
• Индексируемость и ИИ-агенты. Поисковые роботы и ИИ-агенты могут индексировать контент DOM, отрисованный в 2D- и 3D-сценах.
• Редактирование и экспорт медиафайлов. Экспортируйте полные композиции холста, содержащие элементы DOM, напрямую в изображения (toDataURL(), toBlob()) или видеопотоки (captureStream()).

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

HTML-in-Canvas открывает возможности в нескольких областях:

• Большие приложения на основе Canvas. Тяжелые веб-приложения могут отображать компоненты пользовательского интерфейса непосредственно в рабочих областях Canvas, что улучшает доступность и уменьшает размер пакета.
• 3D-сцены и игры. Интерактивные элементы DOM, например игровые терминалы или читаемые 3D-книги, можно размещать прямо в сценах WebXR.
• Редактирование и экспорт медиафайлов. Инструменты для создания креативов, сочетающие расширенную типографику HTML с эффектами шейдеров, могут экспортировать составные сцены непосредственно в изображения или видеопотоки.
• Выразительные интерфейсы. Вы можете управлять HTML-контентом как необработанными пикселями, чтобы создавать визуальные эффекты на основе шейдеров.

Быстрый старт: HTML в Canvas

Чтобы отобразить HTML-код на холсте, выполните следующие действия:

1. Подготовьте холст. Задайте нужные атрибуты, чтобы браузер знал, что HTML-код нужно отрисовать в элементе canvas. Эта настройка одинакова для контекстов 2D, WebGL и WebGPU. Узнайте, как настроить холст и как объявить элементы HTML, которые будут отрисовываться независимо.

   <!-- Prepare your canvas by setting the `content` attribute -->
   <canvas id="canvas" width="600" height="400" content="drawable">
     <!-- Mark child as `drawable` to render to canvas -->
     <div id="myElement" drawable>
       <!-- Your HTML here -->
     </div>
   </canvas>
   

2. Нарисуйте изображение элемента на холсте. Точная реализация зависит от того, отрисовываете ли вы HTML в контексте 2D, WebGL или WebGPU.

   const ctx = canvas.getContext("2d");
   // Draw HTML element into canvas in 2D
   ctx.drawElementImage(myElement, myElementX, myElementY);
   

3. Необязательно: синхронизируйте DOM и пиксели. Синхронизация геометрии также зависит от используемого контекста. В 2D-контексте браузер по умолчанию обрабатывает это автоматически, а в 3D-контексте вам нужно создать преобразование и передать его методу updateElementGeometry.

   // In 3D, construct a transform as needed, for example:
   const transform = new DOMMatrix().translate(x, y);
   // Synchronize the element's DOM and pixels
   canvas.updateElementGeometry(myElement, { canvasTransform: transform });
   

Поддержка фреймворков и экосистем

Основные библиотеки WebGL и 3D-графики поддерживают HTML-in-Canvas:

• Three.js: предлагает экспериментальную поддержку с помощью THREE.HTMLTexture.

  const material = new THREE.MeshBasicMaterial();
  material.map = new THREE.HTMLTexture(uiElement);
  const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
  scene.add(mesh);
  

• PlayCanvas поддерживает потоковую передачу текстур HTML с помощью setSource().

  canvas.addEventListener('paint', () => {
    htmlTexture.setSource(htmlElement);
  }, { once: true });
  

• Babylon.js: предоставляет встроенную привязку через BABYLON.HtmlTexture.

  const htmlTexture = new BABYLON.HtmlTexture("htmlTexture", uiElement, scene);
  material.diffuseTexture = htmlTexture;
  

• PixiJS: встроенная поддержка добавлена в версии v8.19.0 с HTMLSource.

  import { HTMLSource } from 'pixi.js/html-source';
  const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
  app.stage.addChild(sprite);
  

• CanvasUI – библиотека компонентов с открытым исходным кодом, разработанная специально для HTML-in-Canvas.

Подробные инструкции по реализации можно найти в документации к каждому фреймворку.

Обнаружение функций и резервные стратегии

Чтобы обеспечить совместимость с разными браузерами, проверьте поддержку API, прежде чем запускать код:

export function supportsHtmlInCanvas() {
  if (typeof document === "undefined") return false;
  const canvas = document.createElement("canvas");
  canvas.setAttribute("content", "drawable");
  return canvas.content === "drawable";
}

Если API недоступен, вы можете использовать альтернативные интерфейсы, плавающие оверлеи HTML или одну из доступных библиотек (например, three-html-render, html2canvas или dom-to-image).

Дальнейшие действия

• Ознакомьтесь с полной документацией по HTML-in-Canvas для разработчиков Chrome.
• Улучшите помощников в программировании с помощью Modern Web Guidance.
• Оставьте отзыв в хранилище WICG на GitHub.
• Ознакомьтесь с демонстрационными версиями HTML-in-Canvas.