Годами веб-разработчики сталкивались с трудным выбором при создании высокоинтерактивных визуальных приложений: опираться на DOM ради богатых семантических возможностей или выводить изображение в элемент <canvas> ради низкоуровневой графической производительности. Новый экспериментальный API HTML-in-Canvas, теперь доступный в origin trial, устраняет этот компромисс. Он позволяет выводить DOM-контент прямо в 2D-холст или текстуру WebGL/WebGPU, сохраняя интерфейс интерактивным, доступным и связанным с функциями браузера.
DOM является основой веб-интерфейса. Он обеспечивает встроенную верстку текста и содержимое, понятное на семантическом уровне, а также поддерживает повседневные операции, например выделение текста для копирования или сохранение изображения через контекстное меню. Он также интегрирован с инструментами доступности, переводом, поиском по странице, режимом чтения, расширениями, темной темой, масштабированием браузера и автозаполнением. Холст, включая WebGL и WebGPU, предоставляет низкоуровневый доступ к пикселям для сложной двумерной и трехмерной графики, от которой зависят игры и сложные приложения вроде Google Docs и Figma. Однако поскольку холст представляет собой сетку пикселей, интерфейс внутри него теряет эти интеграции с браузером и часто требует громоздкой собственной логики.
API HTML-in-Canvas устраняет этот разрыв. Размещая HTML внутри элемента <canvas> и синхронизируя его трансформацию, разработчики получают упрощенную верстку текста, выразительные элементы управления формами, нативное выделение текста и контекстные меню, доступ к дереву доступности, поддержку поиска по странице, возможность индексирования для поисковых роботов и ИИ-агентов, совместимость с расширениями и инспекцию в Chrome DevTools. Сферы применения включают крупные приложения на основе холста, трехмерные сцены и веб-игры, а также иммерсивные WebXR-проекты, которым нужен настоящий интерактивный DOM-интерфейс.
Источник: Hacker News · Сводку подготовил HeadlinesBriefing