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

Про автора

Яніс Озолс

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

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

Усі публікації автора