HTML-in-Canvas в Chrome 157: интерактивный и доступный DOM внутри 2D, WebGL и WebGPU

3 ноября 2026 года Chrome 157 выходит в стабильную ветку, и вместе с ним HTML-in-Canvas API покидает стадию эксперимента. Теперь живые HTML-элементы — формы, кнопки, текст — можно рисовать прямо внутри canvas в 2D, WebGL и WebGPU, не теряя доступности, поиска по странице и автозаполнения. Код, написанный под origin trial, нужно обновить: имена API изменились.

Раньше командам приходилось выбирать: либо интерфейс на DOM, доступный и привычный, либо быстрая отрисовка в canvas, где каждую кнопку и поле ввода приходится рисовать и «оживлять» вручную. Для проектов, где frontend-разработка упирается в графику — редакторы, дашборды, 3D-конфигураторы, браузерные игры, — этот компромисс исчезает.

Ранний стабильный выпуск Chrome 157 ушёл небольшой доле пользователей Windows и Android ещё 28 октября, а 3 ноября Google раскатывает его на всех. Ниже — как устроен API, что сломается у тех, кто участвовал в origin trial, и что ещё вошло в релиз. Если вы ведёте разработку сайтов с canvas-интерфейсами, проверить код стоит уже сейчас.

Как работает HTML-in-Canvas API

• Разметка. Холст помечается атрибутом content="drawable" — браузер раскладывает его дочерние HTML-элементы. Элементы, которые можно отрисовать в контексте холста, получают атрибут drawable.
• Отрисовка. В обработчике события paint вызывается drawElementImage() для 2D-контекста, texElementSubImage2D() для WebGL или drawElementImageToTexture() для WebGPU. Событие CanvasPaintEvent сообщает, какие элементы изменились (changedElements).
• Геометрия. Методы updateElementGeometry() и clearElementGeometry() синхронизируют положение элемента в 3D-сцене через матрицы преобразований, так что клики попадают туда, где элемент нарисован.
• Браузерные функции сохраняются. Содержимое попадает в дерево доступности, работают скринридеры, поиск по странице, автоперевод, автозаполнение, выделение и копирование текста, контекстное меню, инспектор DevTools и расширения.

Почему это важнее, чем очередной CSS-трюк

До сих пор у canvas-приложений было два плохих варианта. Первый — накладывать HTML поверх холста и синхронизировать позиции в JavaScript: элементы отстают при анимации и не могут оказаться внутри 3D-сцены, только над ней. Второй — рисовать интерфейс целиком в canvas: тогда скринридер видит пустой прямоугольник, а поле ввода не работает с автозаполнением и экранной клавиатурой.

HTML-in-Canvas убирает этот выбор. Google называет основными сценариями крупные canvas-приложения со сложным интерфейсом, 3D-игры и WebXR-сцены с интерактивными элементами внутри, креативные инструменты, где типографика проходит через шейдеры. Для бизнеса это означает, что «красивый» интерфейс больше не обязан быть недоступным: это важно и для пользователей, и для требований по доступности интерфейсов.

Что сломается у тех, кто пробовал origin trial

Это главный практический риск релиза. В стабильной версии изменились имена, и старые просто удалены. По данным изменений в движке PlayCanvas, без обновления HTML-текстуры в Chrome 157 остаются пустыми.

• атрибут layoutsubtree заменён на content="drawable" у холста и drawable у элементов;
• в WebGL метод texElementImage2D стал texElementSubImage2D;
• в WebGPU метод copyElementImageToTexture стал drawElementImageToTexture.

Three.js, Babylon.js, PlayCanvas и PixiJS (с версии 8.19.0) уже поддерживают HTML-in-Canvas через свои абстракции текстур, поэтому для проектов на этих движках обычно достаточно обновить зависимость.

Что ещё вошло в Chrome 157

• CSS. Сокращённые свойства для углов задают border-radius и corner-shape одного угла в одной декларации; появились text-decoration-inset и произвольные строки в text-overflow.
• Производительность. Long Animation Frames API показывает длительность пересчёта стилей и раскладки — проще искать причины плохого INP.
• Безопасность. Background Fetch API теперь подчиняется CORS, как обычный fetch.
• API. ProgressEvent доступен в service workers, Language Detector API пришёл в Chrome для Android, появились методы потоковой вставки HTML.
• Origin trials. Можно тестировать Connection Allowlists и Overscroll Areas.

Как действовать командам

1. Найдите старые имена. Поищите в коде layoutsubtree, texElementImage2D и copyElementImageToTexture и замените их на стабильные.
2. Обновите графический движок до версии, где поддержаны имена Chrome 157.
3. Оставьте фолбэк. Проверяйте поддержку content="drawable" и для других браузеров показывайте HTML-оверлей или используйте html2canvas: пока API стабилен только в Chromium.
4. Проверьте доступность скринридером: именно ради неё стоит переносить интерфейс внутрь холста.

Часто задаваемые вопросы

Можно ли использовать HTML-in-Canvas в продакшене? В Chrome и браузерах на Chromium — да, с версии 157. Для остальных браузеров нужен запасной вариант, документация MDN по API пока в работе.

Заменит ли это обычную вёрстку? Нет. API нужен там, где интерфейс уже живёт в canvas или 3D-сцене. Обычным сайтам он ничего не даёт — подробнее о том, из чего состоит клиентская часть, в нашем материале о frontend-разработке.

Источники

• Chrome for Developers — HTML-in-Canvas in Chrome 157, 26 октября 2026 (первоисточник).
• Chrome Platform Status — Chrome 157 Release Notes (стабильный выпуск 3 ноября 2026).
• Chrome Releases — Early Stable Update for Desktop (157.0.8103.26), 28 октября 2026.
• MDN (Mozilla) — документация HTML-in-Canvas API, 26 октября 2026.
• PlayCanvas Engine — поддержка имён API из Chrome 157, 26 октября 2026.