Chrome тестирует HTML-in-Canvas API для интерактивного содержимого в Canvas

22 октября команда Chrome представила экспериментальный HTML-in-Canvas API и открыла для него origin trial. Как говорится в анонсе, API позволяет выводить HTML-содержимое в 2D Canvas или использовать его как текстуру в WebGL и WebGPU. При этом элементы сохраняют интерактивность и связь с возможностями браузера. Пока это испытание, а не повод переносить в Canvas интерфейс обычного сайта.

Почему графическим приложениям нужен HTML

У DOM и Canvas разные сильные стороны. HTML уже умеет размещать текст, работать с формами и передавать смысл содержимого браузеру. Пользователь может выделить и скопировать текст, найти его на странице или обратиться к интерфейсу через средства доступности. Canvas даёт приложению контроль над сложной 2D- и 3D-графикой. Но если весь интерфейс нарисован пикселями, привычное поведение HTML приходится воспроизводить отдельно.

Новый API позволяет разместить DOM-элемент внутри <canvas> и отрисовать его в графической сцене. Содержимое при этом остаётся доступным для экранных дикторов, перевода, расширений и инструментов разработчика. Текст на поверхности 3D-объекта можно выделить, а встроенное в сцену поле ввода продолжает работать как HTML-элемент. В анонсе также говорится, что такой текст смогут читать поисковые обходчики и ИИ-агенты.

Это не просто снимок HTML, наложенный на изображение. Браузеру нужно знать, где нарисованный элемент находится на экране: иначе нажатие, наведение и выделение не совпадут с тем, что видит пользователь. Поэтому вместе с отрисовкой разработчик синхронизирует положение DOM-элемента с его изображением в Canvas.

Как работает API и что ограничивает испытание

Для начала в <canvas> добавляют атрибут layoutsubtree. Он сообщает браузеру о вложенном HTML-содержимом и делает его доступным в дереве доступности. В 2D-контексте элемент выводят методом drawElementImage при событии paint. Метод возвращает преобразование, которое затем записывают в CSS-свойство transform, чтобы область взаимодействия соответствовала нарисованному элементу.

В WebGL для получения текстуры из HTML предусмотрен texElementImage2D, в WebGPU — copyElementImageToTexture. Здесь сопоставить координаты сложнее: положение элемента на экране зависит от того, как сцена использует текстуру. В анонсе показано, как согласовать координаты 3D-сцены, размеры HTML-элемента и область Canvas с помощью преобразований и getElementTransform. Экспериментальная поддержка функции уже появилась в Three.js; способ работы с ней также есть в PlayCanvas.

Origin trial заявлен для Chrome 148–150. Чтобы попробовать API самостоятельно, материал предлагает Chrome Canary 149 или новее с включённым флагом chrome://flags/#canvas-draw-element. Для проверки на сайте с участием других пользователей нужно зарегистрироваться в origin trial. При настройке Canvas важно учитывать плотность пикселей экрана: иначе содержимое может выглядеть размытым.

У технологии есть границы. Она не работает с содержимым iframe другого происхождения — по причинам безопасности и приватности. Кроме того, HTML внутри Canvas рисуется с участием JavaScript. Прокрутка и анимация в таком интерфейсе не могут обновляться независимо от него так, как это возможно вне Canvas. Прежде чем помещать туда прокручиваемую область, стоит проверить, как она ведёт себя под нагрузкой.

Что это значит для проектов

Разработчики больших графических рабочих областей и 3D-сцен смогут использовать обычные HTML-компоненты там, где раньше приходилось самостоятельно реализовывать работу с текстом и элементами управления. Среди приведённых примеров — 3D-книга с HTML-страницами, интерактивный ползунок и типографика, искажённая графическим эффектом. Визуальная часть меняется, но содержимое остаётся доступным для стандартных действий пользователя.

Для владельцев сайтов и маркетологов важнее понять, нужна ли проекту такая сцена вообще. API может пригодиться, если человек должен взаимодействовать с текстом или формой прямо внутри сложной графики. Но он не превращает Canvas в обязательный выбор для промостраницы. Пока полезнее следить за испытанием и проверять конкретный сценарий: доступность, точность попадания по элементам, ввод и прокрутку.

Моё мнение

Меня здесь больше всего цепляет не эффект HTML на 3D-поверхности, а шанс не писать вторую, урезанную версию браузерного интерфейса внутри графического приложения. Если текст можно выделить, найти и передать экранному диктору, у команды появляется больше свободы в выборе способа отрисовки.

Но архитектуру я бы не выбирал по красивой демонстрации. Сначала посмотрел бы профили загрузки и обновления сцены, затем проверил ввод и прокрутку на реальном интерфейсе. Для простого лендинга более простой рендеринг и лёгкий JavaScript обычно понятнее. А вот если приложение уже живёт в Canvas, за испытанием интересно следить.

Источники

Откуда новость. Текст — пересказ своими словами, факты — из источника, мнение — автора.

1. The HTML-in-Canvas API origin trial developer.chrome.com

Об авторе

Янис Озолс

фронтенд-архитектор

Разрабатываю интерфейсы интернет-магазинов в Риге, занимаюсь производительностью и инфраструктурой фронтенда. Люблю находить узкие места не по ощущениям, а по профилям загрузки.

Все публикации автора