HTML-in-Canvas in Chrome 157: DOM interattivo all'interno di 2D, WebGL e WebGPU

Natalia Markoborodova

Data di pubblicazione: 26 ottobre 2026

Dopo un origin trial di successo, Chrome 157 segna la release stabile ufficiale dell'API HTML-in-Canvas. L'API HTML-in-Canvas colma il divario tra il mondo interattivo e accessibile del DOM e il controllo ad alte prestazioni a livello di pixel di <canvas>. Questa API ti offre il meglio di entrambi i mondi: funzionalità avanzate del browser e grafica canvas con accelerazione GPU.

Panoramica video dell'API HTML-in-Canvas.

Il dilemma tra canvas e DOM

In precedenza, durante la creazione di app web visivamente impegnative, dovevi scegliere tra elementi HTML standard e contesti canvas non elaborati.

Tecnologia Punti di forza Limitazioni
<canvas> Controllo dei pixel di basso livello con accesso alla GPU per gestire pipeline grafiche 2D e 3D, shader personalizzati e worker fuori schermo. Rendering ad alte prestazioni per UI complesse e ricche di dati. Nessuna funzionalità della piattaforma web integrata, come la selezione del testo, il copia e incolla, le azioni con il tasto destro del mouse e il testo a capo. La griglia di pixel opaca non supporta gli screen reader, la funzionalità Trova nella pagina, la traduzione automatica o la compilazione automatica per impostazione predefinita e richiede un'implementazione di riserva.
HTML UI semantica pronta all'uso con controlli dei moduli integrati, tipografia adattabile e stile CSS. Integrazione profonda del browser per screen reader, Trova nella pagina e DevTools. Capacità limitata di controllare le prestazioni per UI complesse. Gli effetti visivi sono limitati a CSS e SVG standard senza manipolazione diretta dei pixel o shader.

Prima di HTML-in-Canvas

Prima di questa API, se creavi UI con un uso intensivo di canvas, dovevi scegliere tra due approcci, ognuno con i propri svantaggi:

  1. Rendering del testo direttamente come pixel del canvas (fillText()): le app disegnavano il testo e i controlli UI in modo imperativo come pixel non elaborati. Questo approccio ha comportato i seguenti svantaggi:
    • Problemi di accessibilità: gli screen reader e gli strumenti di assistenza non possono leggere i pixel del canvas, a meno che non crei e sincronizzi manualmente un DOM di riserva invisibile.
    • Perdita delle funzionalità del browser: gli utenti non possono eseguire ricerche con Trova nella pagina (Ctrl/Cmd+F), copiare e incollare il testo in modo naturale, attivare i menu contestuali o utilizzare la traduzione e il controllo ortografico del browser.
    • Motori di tipografia complessi: per supportare l'internazionalizzazione è necessario raggruppare motori di layout JavaScript di grandi dimensioni.
  2. Overlay HTML mobili sopra il canvas: ad esempio, utilizzando librerie che posizionano elementi HTML standard sopra il canvas calcolando i riquadri di delimitazione e le trasformazioni di matrici in JavaScript. Gli svantaggi di questo approccio includono:
    • Ritardo di sincronizzazione e tearing visivo: lo scorrimento, lo zoom o i movimenti della fotocamera in 3D possono causare lo spostamento o il tremolio degli elementi DOM in overlay rispetto ai pixel del canvas a causa di differenze di durata frame.
    • Limitazioni di ritaglio e ordinamento z: gli overlay HTML si trovano sempre sopra l'intero buffer del canvas. L'incorporamento di HTML all'interno di una scena 3D (ad esempio, dietro un oggetto 3D, all'interno di un materiale di vetro o riflesso in uno specchio) non era possibile senza soluzioni alternative complesse da iframe a immagine.
    • Overhead delle prestazioni: per mantenere gli overlay allineati al canvas, devi ricalcolare la trasformazione di ogni overlay in JavaScript e scriverla in style.transform su ogni frame. Il browser analizza quindi ogni stringa e ricalcola lo stile dell'elemento prima di poter eseguire il rendering del frame, quindi il lavoro del thread principale aumenta con ogni overlay aggiunto. In un contesto 2D, drawElementImage() aggiorna la posizione dell'elemento per te. In WebGL e WebGPU, passi la trasformazione che calcoli a updateElementGeometry() come matrice. In entrambi i casi, il browser non analizza il CSS né ricalcola gli stili.

Principali vantaggi di HTML-in-Canvas

HTML-in-Canvas elimina questi compromessi. Inserendo l'HTML all'interno dell'elemento <canvas>, i contenuti rimangono interattivi e tutte le integrazioni del browser funzionano automaticamente.

I contenuti HTML visualizzati all'interno di un <canvas> hanno le stesse funzionalità dell'HTML al di fuori di <canvas>:

  • Layout e formattazione del testo: supporto per il layout e la formattazione del testo, incluso il testo su più righe o bidirezionale con stili CSS applicati.
  • Controlli dei moduli: controlli dei moduli espressivi con ampie opzioni di personalizzazione di CSS e shader.
  • Selezione, copia e incolla del testo e clic con il tasto destro del mouse: gli utenti possono evidenziare il testo all'interno di scene 3D o attivare menu contestuali.
  • Accessibilità: i contenuti HTML visualizzati all'interno del canvas vengono esposti all'albero di accessibilità per gli screen reader.
  • Integrazione delle funzionalità del browser: le funzionalità del browser come la traduzione, la compilazione automatica e la ricerca nella pagina funzionano immediatamente. Gli utenti possono tradurre o cercare testo all'interno di texture WebGL e WebGPU.
  • Integrazione delle estensioni: le estensioni del browser funzionano sui contenuti. Ad esempio, un'estensione di sostituzione del testo aggiorna automaticamente il testo visualizzato sulle mesh 3D.
  • Integrazione di DevTools: ispeziona e modifica gli stili CSS per gli elementi UI di Canvas direttamente in Chrome DevTools.
  • Indicizzabilità e agenti AI: i web crawler e gli agenti AI possono indicizzare i contenuti DOM sottoposti a rendering in scene 2D e 3D.
  • Editing ed esportazione di contenuti multimediali: esporta composizioni canvas complete contenenti elementi DOM attivi direttamente in immagini (toDataURL(), toBlob()) o stream video (captureStream()).
Demo che confronta l'integrazione delle funzionalità del testo visualizzato direttamente in un canvas e di HTML-in-Canvas. Nel riquadro HTML-in-Canvas, i contenuti sono selezionabili e traducibili e le funzionalità del browser, come la compilazione automatica, funzionano immediatamente. Nel riquadro canvas standard, i contenuti vengono visualizzati direttamente in un canvas utilizzando il metodo fillText e non sono interattivi.

Casi d'uso principali

HTML-in-Canvas sblocca funzionalità in diverse aree:

  • App di grandi dimensioni basate su canvas: le app web pesanti possono eseguire il rendering dei componenti della UI direttamente negli spazi di lavoro di canvas, migliorando l'accessibilità e riducendo le dimensioni del bundle.
  • Scene e giochi 3D: i giochi e le esperienze WebXR immersive possono posizionare elementi DOM interattivi, come terminali di gioco o libri 3D leggibili, direttamente all'interno delle scene.
  • Editing ed esportazione di contenuti multimediali: gli strumenti creativi che combinano una tipografia HTML avanzata con effetti shader possono esportare scene composite direttamente in immagini o stream video.
  • UI espressive: puoi manipolare i contenuti HTML come pixel non elaborati per creare effetti visivi basati su shader.

Guida rapida all'HTML in Canvas

Il rendering del codice HTML in un canvas richiede i seguenti passaggi:

  1. Prepara la tela. Imposta in modo dichiarativo gli attributi corretti per far sapere al browser che deve eseguire il rendering del codice HTML in un canvas. Questa configurazione è identica nei contesti 2D, WebGL e WebGPU. Scopri come configurare il canvas e come dichiarare gli elementi HTML da disegnare in modo indipendente.

    <!-- 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. Disegna l'immagine dell'elemento nel canvas. L'implementazione esatta dipende dal fatto che il rendering dell'HTML venga eseguito in un contesto 2D, WebGL o WebGPU.

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

  3. (Facoltativo) Sincronizza il DOM e i pixel. La sincronizzazione della geometria dipende anche dal contesto che utilizzi. In 2D, il browser lo gestisce automaticamente per impostazione predefinita, mentre nei contesti 3D devi creare una trasformazione e passarla al metodo 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 });

Supporto di framework ed ecosistemi

Le principali librerie grafiche WebGL e 3D supportano HTML-in-Canvas:

  • Three.js: offre un supporto sperimentale utilizzando 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: supporta lo streaming di texture HTML utilizzando setSource().

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

  • Babylon.js: fornisce un'associazione integrata tramite BABYLON.HtmlTexture.

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

  • PixiJS: ha fornito il supporto integrato nella versione v8.19.0 con HTMLSource.

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

  • CanvasUI: una libreria di componenti open source progettata specificamente per HTML-in-Canvas.

Per ulteriori dettagli sull'implementazione, consulta la documentazione di ciascun framework.

Rilevamento delle funzionalità e strategie di fallback

Per garantire la compatibilità tra browser, verifica il supporto dell'API prima di eseguire il codice:

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

Se l'API non è disponibile, puoi utilizzare UI alternative, overlay HTML mobili o una delle librerie disponibili (ad esempio three-html-render, html2canvas o dom-to-image).

Passaggi successivi