HTML-in-Canvas w Chrome 157: interaktywny DOM w 2D, WebGL i WebGPU

Natalia Markoborodova

Opublikowano: 26 października 2026 r.

Po pomyślnym testowaniu origin Chrome 157 wprowadza oficjalną stabilną wersję interfejsu HTML-in-Canvas API. Interfejs HTML-in-Canvas API wypełnia lukę między interaktywnym, dostępnym światem DOM a wysoką wydajnością i kontrolą na poziomie pikseli, którą zapewnia <canvas>. Ten interfejs API łączy w sobie to, co najlepsze – bogate możliwości przeglądarki i grafikę Canvas przyspieszaną przez GPU.

Dylemat: Canvas czy DOM?

Wcześniej podczas tworzenia aplikacji internetowych o wysokich wymaganiach wizualnych trzeba było wybierać między standardowymi elementami HTML a nieprzetworzonymi kontekstami canvas.

Przed wprowadzeniem HTML-in-Canvas

Przed wprowadzeniem tego interfejsu API, jeśli tworzyłeś interfejsy użytkownika z dużą ilością elementów canvas, musiałeś wybrać jedno z dwóch podejść, z których każde miało swoje wady:

1. Renderowanie tekstu bezpośrednio jako pikseli obszaru roboczego (fillText()): aplikacje rysowały tekst i elementy sterujące interfejsu w sposób imperatywny jako nieprzetworzone piksele. Takie podejście miało te wady:
   • Problemy z ułatwieniami dostępu: czytniki ekranu i narzędzia wspomagające nie mogą odczytywać pikseli obszaru roboczego, chyba że ręcznie utworzysz i zsynchronizujesz niewidoczny zastępczy model DOM.
   • Utrata funkcji przeglądarki: użytkownicy nie mogą wyszukiwać za pomocą funkcji Znajdź na stronie (Ctrl/Cmd+F), kopiować i wklejać tekstu w naturalny sposób, wywoływać menu kontekstowych ani korzystać z funkcji tłumaczenia i sprawdzania pisowni w przeglądarce.
   • Złożone silniki typograficzne: obsługa internacjonalizacji wymaga dołączenia dużych silników układu JavaScript.
2. Pływające nakładki HTML na obszarze roboczym: na przykład używanie bibliotek, które pozycjonują standardowe elementy HTML nad obszarem roboczym, obliczając ramki ograniczające i przekształcenia macierzy w języku JavaScript. Wady tego podejścia:
   • Opóźnienie synchronizacji i rozrywanie obrazu: przewijanie, powiększanie lub ruchy kamery w 3D mogą powodować przesuwanie się lub drganie elementów DOM nakładki względem pikseli obszaru roboczego z powodu różnic w czasie renderowania klatek.
   • Ograniczenia dotyczące przycinania i kolejności renderowania: nakładki HTML zawsze znajdują się na górze całego bufora obszaru roboczego. Osadzanie kodu HTML wewnątrz sceny 3D (np. za obiektem 3D, wewnątrz szklanego materiału lub w odbiciu w lustrze) nie było możliwe bez skomplikowanych obejść polegających na konwertowaniu elementów iframe na obrazy.
   • Obciążenie wydajności: aby nakładki były wyrównane z obszarem roboczym, musisz ponownie obliczyć przekształcenie każdej nakładki w kodzie JavaScript i zapisać je w style.transform w każdej klatce. Następnie przeglądarka analizuje każdy ciąg znaków i ponownie oblicza styl elementu, zanim będzie mogła wyrenderować ramkę, więc praca wątku głównego rośnie z każdą dodaną nakładką. W kontekście 2D drawElementImage() aktualizuje pozycję elementu. W WebGL i WebGPU przekazujesz obliczone przekształcenie do updateElementGeometry() jako macierz. W obu przypadkach przeglądarka nie analizuje kodu CSS ani nie przelicza stylów.

Najważniejsze zalety HTML-in-Canvas

HTML-in-Canvas eliminuje te kompromisy. Dzięki umieszczeniu kodu HTML w elemencie <canvas> treść pozostaje interaktywna, a wszystkie integracje przeglądarki działają automatycznie.

Treść HTML renderowana w elemencie <canvas> ma takie same możliwości jak kod HTML poza elementem <canvas>:

• Układ i formatowanie tekstu: obsługa układu i formatowania tekstu, w tym tekstu wielowierszowego lub dwukierunkowego ze stylami CSS.
• Elementy sterujące formularza: ekspresyjne elementy sterujące formularza z rozbudowanymi opcjami dostosowywania CSS i shadera.
• Zaznaczanie, kopiowanie i wklejanie tekstu oraz klikanie prawym przyciskiem myszy: użytkownicy mogą zaznaczać tekst w scenach 3D lub wywoływać menu kontekstowe.
• Ułatwienia dostępu: treść HTML renderowana w obszarze roboczym jest udostępniana drzewu ułatwień dostępu na potrzeby czytników ekranu.
• Integracja funkcji przeglądarki: funkcje przeglądarki, takie jak tłumaczenie, autouzupełnianie i znajdowanie na stronie, działają od razu. Użytkownicy mogą tłumaczyć lub wyszukiwać tekst w teksturach WebGL i WebGPU.
• Integracja rozszerzeń: rozszerzenia przeglądarki działają na treściach. Na przykład rozszerzenie do zastępowania tekstu automatycznie aktualizuje tekst renderowany na siatkach 3D.
• Integracja z Narzędziami deweloperskimi: sprawdzaj i modyfikuj style CSS elementów interfejsu Canvas bezpośrednio w Narzędziach deweloperskich w Chrome.
• Indeksowalność i agenty AI: Roboty skanujące i agenty AI mogą indeksować zawartość DOM renderowaną w scenach 2D i 3D.
• Edytowanie i eksportowanie multimediów: eksportuj pełne kompozycje obszaru roboczego zawierające elementy DOM bezpośrednio do obrazów (toDataURL(), toBlob()) lub strumieni wideo (captureStream()).

Główne przypadki użycia

HTML-in-Canvas zapewnia możliwości w kilku obszarach:

• Duże aplikacje oparte na elemencie canvas: rozbudowane aplikacje internetowe mogą renderować komponenty interfejsu bezpośrednio w obszarach roboczych elementu canvas, co poprawia dostępność i zmniejsza rozmiar pakietu.
• Sceny i gry 3D: immersyjne gry i funkcje WebXR mogą umieszczać interaktywne elementy DOM, takie jak terminale w grze lub czytelne książki 3D, bezpośrednio w scenach.
• Edytowanie i eksportowanie multimediów: narzędzia do tworzenia treści, które łączą rozbudowaną typografię HTML z efektami cieniowania, mogą eksportować złożone sceny bezpośrednio do obrazów lub strumieni wideo.
• Ekspresyjne interfejsy: możesz manipulować treściami HTML jako nieprzetworzonymi pikselami, aby tworzyć efekty wizualne oparte na cieniowaniu.

Szybki start: HTML w Canvas

Renderowanie kodu HTML w elemencie canvas wymaga wykonania tych czynności:

1. Przygotuj obszar roboczy. Deklaratywnie ustaw odpowiednie atrybuty, aby poinformować przeglądarkę, że powinna renderować kod HTML w elemencie canvas. Ta konfiguracja jest identyczna w kontekstach 2D, WebGL i WebGPU. Dowiedz się, jak skonfigurować obszar roboczy i jak zadeklarować elementy HTML, które mają być rysowane niezależnie.

   <!-- Prepare your canvas by setting the `content` attribute -->
   <canvas id="canvas" width="600" height="400" content="drawable">
     <!-- Mark child as `drawable` to render to canvas -->
     <div id="myElement" drawable>
       <!-- Your HTML here -->
     </div>
   </canvas>
   

2. Narysuj obraz elementu na obszarze roboczym. Dokładna implementacja zależy od tego, czy renderujesz kod HTML w kontekście 2D, WebGL czy WebGPU.

   const ctx = canvas.getContext("2d");
   // Draw HTML element into canvas in 2D
   ctx.drawElementImage(myElement, myElementX, myElementY);
   

3. Opcjonalnie: zsynchronizuj DOM i piksele. Synchronizacja geometrii zależy też od używanego kontekstu. W przypadku 2D przeglądarka domyślnie obsługuje to automatycznie, natomiast w przypadku 3D musisz utworzyć przekształcenie i przekazać je do metody updateElementGeometry.

   // In 3D, construct a transform as needed, for example:
   const transform = new DOMMatrix().translate(x, y);
   // Synchronize the element's DOM and pixels
   canvas.updateElementGeometry(myElement, { canvasTransform: transform });
   

Obsługa platform i ekosystemów

Główne biblioteki WebGL i grafiki 3D obsługują HTML-in-Canvas:

• Three.js: oferuje eksperymentalną obsługę za pomocą THREE.HTMLTexture.

  const material = new THREE.MeshBasicMaterial();
  material.map = new THREE.HTMLTexture(uiElement);
  const mesh = new THREE.Mesh(new THREE.BoxGeometry(1, 1, 1), material);
  scene.add(mesh);
  

• PlayCanvas obsługuje strumieniowanie tekstur HTML za pomocą setSource().

  canvas.addEventListener('paint', () => {
    htmlTexture.setSource(htmlElement);
  }, { once: true });
  

• Babylon.js: zapewnia wbudowane powiązanie za pomocą BABYLON.HtmlTexture.

  const htmlTexture = new BABYLON.HtmlTexture("htmlTexture", uiElement, scene);
  material.diffuseTexture = htmlTexture;
  

• PixiJS: wbudowana obsługa w wersji v8.19.0 z HTMLSource.

  import { HTMLSource } from 'pixi.js/html-source';
  const sprite = Sprite.from(new HTMLSource({ resource: form, autoUpdate: true }));
  app.stage.addChild(sprite);
  

• CanvasUI: biblioteka komponentów open source zaprojektowana specjalnie do obsługi HTML-in-Canvas.

Więcej informacji o implementacji znajdziesz w dokumentacji poszczególnych platform.

Wykrywanie funkcji i strategie zastępcze

Aby zapewnić zgodność z różnymi przeglądarkami, przed uruchomieniem kodu sprawdź obsługę interfejsu API:

export function supportsHtmlInCanvas() {
  if (typeof document === "undefined") return false;
  const canvas = document.createElement("canvas");
  canvas.setAttribute("content", "drawable");
  return canvas.content === "drawable";
}

Jeśli interfejs API jest niedostępny, możesz użyć alternatywnych interfejsów użytkownika, pływających nakładek HTML lub jednej z dostępnych bibliotek (np. three-html-render, html2canvas lub dom-to-image).

Dalsze kroki

• Zapoznaj się z pełną dokumentacją Chrome dla deweloperów dotyczącą HTML-in-Canvas.
• Ulepsz asystentów wspomagania kodowania za pomocą Przewodnika po współczesnych technologiach internetowych.
• Prześlij opinię w repozytorium WICG na GitHubie.
• Zapoznaj się z demonstracjami społeczności dotyczącymi HTML w Canvas.