Внутри canvas теперь можно выделять текст и заполнять формы
Прочитала про HTML-in-Canvas API, который вышел в Chrome 157. Он позволяет отрисовывать HTML-элементы прямо внутри canvas, сохраняя их связь с DOM.
Обычно текст на холсте — это пиксели. Браузер не воспринимает нарисованную кнопку как кнопку, а поле ввода приходится реализовывать самостоятельно. Можно разместить HTML поверх canvas, но тогда нужно синхронизировать его положение с графикой при перемещении и масштабировании.
С новым API можно встроить в сцену настоящий HTML: текст, кнопки, формы со стилями CSS. При этом сохраняются выделение и копирование текста, поиск по странице, автозаполнение и доступность для скринридеров. Например, терминал в 3D-игре может содержать настоящее поле ввода. В WebGL и WebGPU разработчик передаёт браузеру преобразование элемента, чтобы область взаимодействия совпадала с его изображением.
Поддержку API пока нужно проверять и предусматривать запасной вариант, но возможность пользоваться обычными браузерными функциями прямо внутри графической сцены выглядит круто
#ks_фронтенд #ks_новости #фронтенд #frontend #canvas #сайт #ит
