Esta API Selvagem Desbloqueia a Web

A web muitas vezes parece estéril, uma paisagem de modelos previsíveis. Sites gerados por AI exacerbam essa uniformidade, criando experiências que priorizam a função em detrimento do prazer. Essa homogeneização deixa os usuários desejando algo novo, algo inesperado, um retorno às raízes mais experimentais da internet.

O capricho, outrora uma marca registrada da experimentação inicial da web, desapareceu em grande parte dos sites convencionais. No entanto, como demonstra o vídeo "HTML In Canvas Is Wild And I Love It" da Better Stack, interações criativas e lúdicas podem reengajar profundamente os usuários. Imagine um site onde você joga pinball para cancelar a inscrição, ou navega no Twitter a partir de um desktop virtual, como vividamente demonstrado nos Demos Shown.

Apresentamos o HTML in Canvas, um novo experimento do Chrome pronto para injetar a tão necessária criatividade de volta ao desenvolvimento web. Esta poderosa API, atualmente uma Proposal detalhada nos Links Relevantes, permite aos desenvolvedores renderizar elementos HTML reais e interativos diretamente dentro de cenas WebGL e 2D Canvas. Representa uma mudança fundamental na forma como concebemos e construímos interfaces digitais, indo além das apresentações estáticas.

O design web tradicional, limitado pelo modelo de caixa e pelas regras em cascata do CSS, muitas vezes tem dificuldade em alcançar layouts verdadeiramente dinâmicos ou fisicamente simulados. Embora robusto, o CSS geralmente dita uma estrutura rígida para o conteúdo. O Canvas, em contraste marcante, oferece um ambiente ilimitado e em nível de pixel onde os desenvolvedores exercem controle sem precedentes, liberando o conteúdo de sistemas de grade convencionais e permitindo paradigmas visuais verdadeiramente únicos.

Esta libertação permite experiências anteriormente consideradas impraticáveis ou mesmo impossíveis dentro do DOM padrão. Desenvolvedores como Alyx, Dominik e Sawyer já apresentaram aplicações surpreendentes, desde efeitos interativos de rastreamento ocular até ambientes virtuais totalmente integrados que respondem à entrada do usuário em tempo real. Seus primeiros experimentos sugerem um futuro onde as páginas da web não são apenas lidas, mas dinamicamente experienciadas, promovendo um engajamento mais profundo.

Ao preencher a lacuna entre as ricas capacidades do HTML (acessibilidade, internacionalização, renderização de texto complexo) e a destreza gráfica do Canvas, este experimento capacita os desenvolvedores a criar experiências que são profundamente interativas e inerentemente divertidas. É o melhor dos dois mundos, resolvendo desafios complexos de layout enquanto abre portas para uma personalização de UI incomparável, quebrando o molde do design web uniforme.

Imagine renderizar elementos HTML interativos e ao vivo diretamente dentro de uma cena WebGL ou 2D Canvas. Esta é a premissa central do HTML in Canvas, uma proposta inovadora que transforma qualquer elemento DOM padrão — completo com seu estilo CSS e funcionalidade JavaScript — em uma textura dinâmica para gráficos acelerados por GPU. Ele efetivamente preenche a lacuna entre o conteúdo estruturado do HTML e a flexibilidade visual de um Canvas.

Este não é apenas um conceito especulativo; HTML in Canvas é uma proposta oficial defendida pelo Web Incubator Community Group (WICG). Atualmente, existe como um recurso experimental dentro do Chrome Canary, permitindo que os desenvolvedores o ativem por meio de uma flag e comecem a explorar suas capacidades. O vídeo "HTML In Canvas Is Wild And I Love It" da Better Stack destaca o recente aumento de demonstrações criativas.

Antes desta proposta, integrar conteúdo HTML complexo num ambiente Canvas era um obstáculo significativo. Os desenvolvedores frequentemente recorriam à reimplementação manual de renderização de texto, motores de layout e controles de UI dentro de contextos WebGL ou 2D Canvas. Este processo trabalhoso frequentemente comprometia a acessibilidade, a internacionalização e o desempenho geral, forçando uma troca entre interatividade rica e proeza gráfica.

HTML in Canvas elimina estes compromissos ao tratar os elementos HTML como cidadãos de primeira classe dentro do pipeline gráfico. Crucialmente, o HTML renderizado permanece totalmente interativo, acessível e uma parte integrante da DOM tree. Os utilizadores podem clicar em botões, preencher formulários ou selecionar texto dentro destes componentes HTML "incorporados", experienciando-os tão perfeitamente como qualquer elemento de página web padrão, em vez de uma mera imagem estática.

Este avanço desbloqueia possibilidades sem precedentes para o web design, permitindo aos desenvolvedores sobrepor interfaces complexas, visualizações de dados dinâmicas ou até mesmo mini-aplicações inteiras diretamente dentro de cenas 3D imersivas. Demos recentes de inovadores como Alyx, Dominik e Sawyer demonstram o potencial imediato, ilustrando quão facilmente os desenvolvedores podem agora infundir conteúdo web rico e interativo em experiências visualmente deslumbrantes e impulsionadas por GPU.

Experiências web baseadas em Canvas frequentemente enfrentam obstáculos significativos, particularmente em áreas onde o HTML nativo se destaca. Esta nova API aborda diretamente estas questões de longa data, começando com a acessibilidade. Tradicionalmente, o conteúdo renderizado puramente dentro de um elemento `<canvas>` é uma caixa preta para tecnologias assistivas como leitores de tela. Os desenvolvedores tinham que reimplementar laboriosamente o significado semântico, se é que o faziam.

HTML in Canvas resolve isso tratando os elementos HTML subjacentes como participantes reais do layout, mesmo quando invisíveis. Aplicar um atributo `layout subtree` ao elemento Canvas informa ao navegador para incluir os seus filhos HTML na árvore de acessibilidade e permitir que recebam foco. Isso garante que o conteúdo rico e interativo renderizado como uma textura permaneça semanticamente disponível e navegável para todos os utilizadores, uma vitória monumental para o design inclusivo.

Internacionalização (i18n) apresenta outro desafio formidável para a renderização personalizada de Canvas. Implementar a formatação de texto correta, ligaduras e, especialmente, texto da direita para a esquerda (RTL) para idiomas como árabe ou hebraico é incrivelmente complexo. Os desenvolvedores frequentemente gastam inúmeras horas a construir ou integrar motores de texto de terceiros. O navegador, no entanto, aperfeiçoou isso ao longo de décadas.

Esta API aproveita diretamente o motor de texto maduro do navegador. Isso significa que os desenvolvedores não precisam mais reinventar a roda para o suporte a idiomas globais, garantindo que todo o texto seja renderizado com precisão e beleza, independentemente do script ou direção. Isso reduz drasticamente a sobrecarga de desenvolvimento e melhora a qualidade das aplicações Canvas internacionalizadas.

O desempenho e a qualidade de renderização também apresentam melhorias substanciais. Os motores de navegador são altamente otimizados, frequentemente com aceleração de GPU, para exibir conteúdo HTML e CSS. As bibliotecas de renderização de texto personalizadas dentro do Canvas raramente correspondem a esta eficiência nativa ou fidelidade visual. Ao descarregar a renderização de texto e layout complexo para o navegador, a API liberta ciclos de GPU para efeitos gráficos mais exigentes dentro do próprio Canvas.

Esta abordagem oferece verdadeiramente o melhor de dois mundos. Concede aos desenvolvedores o poder gráfico ilimitado e a liberdade criativa do Canvas, como visto nas demos inovadoras de Alyx, Dominik e Sawyer, enquanto simultaneamente herda as soluções robustas e testadas em batalha do HTML para desafios fundamentais da web. Para aprofundar as especificações técnicas, consulte a Proposta oficial WICG/html-in-canvas. Esta integração elimina as difíceis compensações anteriormente enfrentadas entre interatividade rica e padrões web essenciais.

Para começar a experimentar HTML in Canvas, primeiro ative a flag de recurso experimental dentro do Chrome Canary. Navegue no seu navegador para `chrome://flags` e procure por "HTML in Canvas" ou "Experimental Web Platform features". Ative a flag correspondente e, em seguida, reinicie o Chrome para aplicar as alterações. Isso desbloqueia a API para uso imediato no seu ambiente de desenvolvimento.

Com a flag ativada, a implementação mais básica envolve a incorporação de um elemento HTML padrão diretamente dentro da sua tag `<canvas>`. Imagine um `<form>` ou uma `<div>` contendo conteúdo rico; coloque-o como um filho do elemento `<canvas>` no seu documento HTML. Tradicionalmente, tais filhos servem como conteúdo de fallback para navegadores que não suportam Canvas, mas esta nova API muda essa dinâmica.

Em seguida, modifique o seu elemento `<canvas>` adicionando o atributo `layout-subtree`: `<canvas layout-subtree id="myCanvas">`. Este atributo crucial sinaliza ao navegador que os seus filhos HTML não são meros fallbacks. Em vez disso, ele os designa como participantes ativos do layout, o que significa que são processados pelo motor de layout, incluídos na árvore de acessibilidade e podem até receber foco. Importante, eles permanecem não pintados na tela até serem explicitamente renderizados.

Para trazer visualmente esse elemento HTML oculto para o seu Canvas, utilize o novo método `drawElementImage()`. Primeiro, obtenha uma referência ao seu elemento HTML e ao contexto de renderização 2D:

```javascript const canvas = document.getElementById('myCanvas'); const ctx = canvas.getContext('2d'); const myForm = document.getElementById('myFormElement'); // Assumindo um formulário filho com id="myFormElement" ```

Em seguida, chame `drawElementImage()`:

```javascript ctx.drawElementImage(myForm, 0, 0, 300, 200); ```

Este método aceita vários parâmetros. O primeiro é `myForm`, o elemento HTML que você deseja renderizar. Os parâmetros subsequentes especificam o retângulo de destino no Canvas: `0, 0` para as coordenadas X e Y do canto superior esquerdo, e `300, 200` para a largura e altura desejadas para escalar o elemento. O navegador efetivamente captura uma "captura de tela" do estado renderizado do elemento `myForm` e o pinta no Canvas na localização especificada.

Esta renderização é dinâmica. Se o conteúdo HTML subjacente de `myForm` mudar — por exemplo, uma entrada de texto é atualizada ou um estilo CSS se altera — o Canvas repinta automaticamente o elemento. Os desenvolvedores também podem solicitar manualmente uma repintura usando `canvas.requestElementRepaint()` para controle preciso sobre os ciclos de atualização, semelhante a `requestAnimationFrame`. Esta interação robusta cria uma ponte poderosa entre o DOM estático e o mundo dinâmico dos gráficos do Canvas.

Indo além das simples integrações 2D de Canvas, o verdadeiro poder do HTML no Canvas surge quando combinado com bibliotecas WebGL como Three.js. Isso eleva as experiências interativas da web de planos bidimensionais para ambientes 3D imersivos, permitindo que os desenvolvedores projetem elementos HTML inteiros e ao vivo nas superfícies de objetos tridimensionais. Isso abre uma nova e atraente fronteira para o design de interface de usuário em espaços virtuais, que antes exigia soluções complexas de renderização personalizada.

Imagine um componente HTML complexo e orientado a dados — talvez um ticker de ações, um painel ou uma janela de chat — completo com estilização CSS e interatividade JavaScript, agora servindo como uma textura dinâmica em um cubo giratório ou em uma tela curva. Isso não é uma captura de tela estática; o conteúdo HTML subjacente permanece totalmente interativo e se atualiza em tempo real, refletindo mudanças nos dados ou na entrada do usuário. Tal capacidade transforma fundamentalmente como concebemos os elementos de UI em um contexto 3D, oferecendo uma flexibilidade sem precedentes.

Central para esta integração avançada está a função `texElementImage2D`. Esta poderosa chamada de API preenche diretamente a lacuna entre o DOM e a GPU, fazendo a mágica acontecer. Ela aceita meticulosamente uma textura Three.js pré-existente, informações cruciais de renderização como espaço de cor e outros parâmetros específicos da GPU, e o próprio elemento HTML de destino. Essencialmente, `texElementImage2D` instrui o navegador a capturar o estado visual atual desse elemento HTML e aplicá-lo como uma textura viva e atualizável à sua geometria 3D dentro da cena WebGL.

Uma demonstração cativante apresentada no vídeo "HTML In Canvas Is Wild And I Love It" mostra um horário ao vivo do London Underground incorporado diretamente em uma cena Three.js. Isso não é meramente uma imagem de um horário; é o elemento HTML real e funcional, completo com um relógio que se atualiza e mudanças em tempo real na programação dos trens. O conteúdo rico em dados, tipicamente confinado a uma página web padrão, torna-se uma parte integral e dinâmica do mundo 3D, reagindo a mudanças de dados subjacentes e interações do usuário sem exigir atualizações manuais de textura ou renderização personalizada complexa.

Esta integração perfeita significa que os desenvolvedores podem aproveitar totalmente as robustas capacidades de HTML e CSS para layout, tipografia e recursos cruciais de acessibilidade, ao mesmo tempo em que utilizam o alto desempenho e a fidelidade visual do WebGL. Atualizações no elemento HTML, como mudanças de conteúdo ou entrada do usuário, acionam repinturas automáticas da textura, garantindo que a representação 3D sempre reflita o estado mais recente do DOM subjacente. Para aqueles ansiosos para aprofundar nos detalhes técnicos e de implementação, a Proposta oficial no GitHub oferece insights abrangentes sobre esta API inovadora.

A chegada do HTML no Canvas no Chrome Canary acendeu uma explosão criativa, inspirando instantaneamente uma onda de demos virais. Desenvolvedores rapidamente começaram a ultrapassar os limites, mostrando o imenso potencial para interações web inteiramente novas. Esta capacidade vai além de layouts estáticos, permitindo experiências dinâmicas e imersivas que antes eram impossíveis sem reconstruir interfaces complexas do zero.

As primeiras demos destacaram a versatilidade da API. Um exemplo particularmente memorável mostrou um padrão obscuro de "cancelamento de inscrição pinball", exigindo que os usuários jogassem um jogo para sair de uma lista de e-mails – uma reinterpretação lúdica, embora subversiva, de uma UI comum. Outra demonstração apresentou um computador virtual navegando no Twitter, imergindo os usuários em um ambiente de desktop simulado completo com conteúdo web interativo. O "jelly slider" de Alyx chamou a atenção com sua entrada tátil e baseada em física, enquanto Dominik e Sawyer também compartilharam experimentos iniciais convincentes, ilustrando a diversa gama de aplicações criativas.

Este recurso inovador capacita programadores criativos e designers de UI/UX a inventar paradigmas de interação inteiramente novos. Livres das restrições rígidas da manipulação tradicional de CSS e DOM, eles podem agora integrar estruturas HTML complexas diretamente em cenas dinâmicas 2D e 3D. Isso fomenta a inovação na experiência do usuário, permitindo aplicações web profundamente interativas e visualmente ricas que redefinem o engajamento do usuário.

Crucialmente, estes não são meros truques visuais. Subjacente a cada exibição inventiva estão elementos de formulário reais, semânticos e acessíveis, garantindo que as interações inovadoras permaneçam inclusivas e funcionais. Esta abordagem de "o melhor dos dois mundos" permite que os desenvolvedores aproveitem a robustez do HTML juntamente com o poder gráfico do Canvas. Para aqueles interessados no desenvolvimento contínuo e no status atual deste recurso transformador, mais detalhes estão disponíveis em HTML-in-canvas - Chrome Platform Status.

Aprofundar-se no HTML no Canvas revela mecânicas sofisticadas do navegador que impulsionam esta inovação. Este recurso experimental no Chrome altera fundamentalmente como o navegador processa e integra elementos DOM em contextos gráficos, indo além dos paradigmas de renderização tradicionais. Essencialmente, cria uma ponte robusta entre o documento e a GPU.

Os desenvolvedores designam elementos HTML específicos para este tratamento usando o atributo `layout-subtree` nos filhos de um elemento `<canvas>`. Após a detecção, o Chrome inicia uma passagem separada de layout e pintura exclusivamente para esses elementos marcados. Esta renderização isolada ocorre fora da tela, impedindo que apareçam no fluxo principal do documento, embora permaneçam parte da árvore de acessibilidade e possam receber foco.

A saída deste processo de renderização dedicado — uma representação visual completa do HTML, incluindo CSS complexo, texto e componentes interativos — é armazenada em um buffer offscreen. Este buffer então serve como fonte direta para a textura do `Canvas`. O navegador transfere eficientemente este conteúdo renderizado para a GPU, onde se torna uma textura utilizável dentro de cenas WebGL ou Canvas 2D.

A sincronização automática é um pilar desta API. O navegador monitora inteligentemente os filhos HTML `layout-subtree` subjacentes para quaisquer alterações que normalmente acionariam um repaint no pipeline de renderização padrão. Quando tal evento de pintura ocorre — seja devido a animações CSS, atualizações JavaScript ou entrada do usuário — a textura do Canvas é atualizada automaticamente, garantindo que o HTML renderizado permaneça perfeitamente sincronizado com sua origem.

Para cenários que exigem controle preciso, a API inclui uma função estilo `requestPaint`. Esta chamada explícita permite que os desenvolvedores acionem manualmente uma atualização da textura HTML. Tal controle granular é inestimável para otimizar o desempenho em aplicações interativas complexas, permitindo atualizações apenas quando interações específicas do usuário ou a lógica da aplicação as exigem, espelhando o controle oferecido por `requestAnimationFrame` para animações visuais.

Embora o potencial criativo do HTML no Canvas seja inegável, a tecnologia permanece em uma fase experimental, e os desenvolvedores devem lidar com suas limitações atuais. Conforme descrito na Proposta oficial, esta API de ponta apresenta vários desafios que os primeiros adotantes encontrarão. Estes não são necessariamente falhas, mas sim arestas esperadas de um recurso ainda em desenvolvimento ativo dentro do Chrome Canary. Ignorar essas desvantagens seria desonesto para a aplicação no mundo real desta ferramenta poderosa.

O desempenho é um obstáculo significativo que os primeiros utilizadores encontram imediatamente. As implementações iniciais de HTML em Canvas são descritas como "instáveis" (wonky), particularmente ao lidar com conteúdo HTML complexo ou em rápida mudança. A renderização de elementos DOM ativos como texturas dentro de uma cena Canvas exige recursos substanciais da GPU, muitas vezes levando a taxas de quadros abaixo do ideal para UIs intrincadas e dinâmicas. Essa sobrecarga é uma quantidade conhecida, ainda não otimizada para implantação generalizada e de alta fidelidade, exigindo uma consideração cuidadosa da complexidade do elemento e da frequência de atualização.

Vários bugs específicos também surgiram durante os testes iniciais. Um problema notável envolve a função central `drawElementImage`, que frequentemente renderiza um quadro atrasado. Isso cria uma dessincronização visual perceptível entre o elemento HTML subjacente e sua representação texturizada no Canvas, quebrando a ilusão de interação e responsividade em tempo real. Além disso, tentar renderizar elementos contendo barras de rolagem nativas pode levar a falhas inesperadas do navegador, um bug crítico que afeta muitos componentes web comuns e que, por enquanto, exige soluções alternativas.

Esses desafios sublinham o propósito explícito de uma fase experimental. A própria razão pela qual recursos como HTML em Canvas chegam ao Canary é para expor esses bugs e gargalos de desempenho a um público mais amplo de desenvolvedores. O feedback de pioneiros como Alyx, Dominik e Sawyer, cujas inovadoras Demos Shown capturaram a atenção, informa diretamente o processo de refinamento, garantindo que esses problemas recebam atenção. Essa abordagem colaborativa e iterativa é fundamental para construir recursos robustos da plataforma web antes que a API avance para uma adoção mais ampla e eventual padronização.

A capacidade de renderizar HTML ativo em uma textura `Canvas` introduz preocupações substanciais de privacidade que desenvolvedores e fornecedores de navegadores consideraram cuidadosamente. Este recurso poderoso, embora permita uma liberdade criativa sem precedentes, poderia inadvertidamente expor informações sensíveis do utilizador ou do sistema a websites maliciosos. Sem controlo, apresenta um novo vetor para o browser fingerprinting.

O browser fingerprinting envolve a recolha de características únicas do navegador, dispositivo e software de um utilizador para criar um identificador persistente, muitas vezes difícil de evitar. Tradicionalmente, o canvas fingerprinting renderiza características do navegador como renderização de fontes, GPU, OS e peculiaridades do driver num canvas offscreen, e depois extrai um hash da imagem. HTML em Canvas poderia amplificar significativamente este risco. Ao renderizar elementos DOM reais, os websites poderiam capturar detalhes ao nível do sistema que não são tipicamente expostos através de APIs padrão. Imagine um site a renderizar uma div oculta contendo fontes do sistema, cores de links visitados, ou mesmo partes do tema da UI do sistema operativo diretamente numa textura. Este "screenshot" de um elemento DOM poderia tornar-se um novo ponto de dados altamente detalhado para rastrear utilizadores na web.

Reconhecendo este desafio crítico, a `Proposal` para HTML em Canvas descreve uma solução robusta: pintura que preserva a privacidade. Este mecanismo sofisticado remove ativamente informações sensíveis da saída renderizada antes que ela chegue à textura `Canvas`. O navegador omite deliberadamente elementos e estilos específicos que poderiam contribuir para o fingerprinting, garantindo que, embora a estrutura e o conteúdo sejam renderizados, o "sabor" único ao nível do sistema seja removido. Esta abordagem impede que os websites explorem o pipeline de renderização para recolha de dados oculta.

A solução proposta exclui especificamente várias categorias de informações de serem "pintadas" na textura `Canvas`, salvaguardando a privacidade do usuário. Essas exclusões críticas incluem: - Cores de links visitados, que poderiam revelar o histórico de navegação de um usuário. - Temas do sistema e elementos de UI específicos da plataforma, como barras de rolagem ou controles de formulário padrão, que revelam detalhes do sistema operacional. - Marcadores de ortografia e gramática, que variam com base nas configurações do usuário ou configurações de dicionário. - Fontes personalizadas não explicitamente carregadas pela página, impedindo a enumeração de instalações de fontes locais. - Anéis de foco e outros indicadores de interação do usuário que podem diferir por sistema ou configurações de acessibilidade. Essa cuidadosa sanitização visa equilibrar o imenso poder criativo da API com um forte compromisso com a privacidade do usuário, prevenindo a criação de novos e potentes vetores de fingerprinting. Para insights técnicos mais aprofundados sobre essas salvaguardas de privacidade, consulte a documentação HTML-in-Canvas.

O experimento HTML in Canvas representa um passo significativo em direção a uma web mais dinâmica e expressiva. Atualmente um recurso experimental no Chrome Canary, sua jornada para se tornar um web standard completo depende de um robusto engajamento da comunidade e de testes extensivos. O Web Incubator Community Group (WICG) está ativamente conduzindo esta proposta, convidando desenvolvedores a explorar seus limites e fornecer feedback inestimável. Este processo colaborativo é crucial para refinar a API, abordar possíveis problemas como aqueles relacionados ao desempenho e à privacidade, e garantir sua viabilidade a longo prazo e compatibilidade entre navegadores.

Desenvolvedores interessados em acompanhar a evolução desta API inovadora devem monitorar a proposta oficial do WICG GitHub. Este repositório serve como o centro para discussões, atualizações de especificações e progresso de implementação, oferecendo um canal direto para contribuições. Além disso, a página Chrome Platform Status oferece insights em tempo real sobre seu ciclo de vida de desenvolvimento dentro do Chrome, incluindo quaisquer alterações em feature flags ou estágios experimentais. A participação ativa da comunidade de desenvolvedores, seja através de relatórios de bugs ou criação de demos inovadoras, influencia diretamente a trajetória da proposta em direção à adoção generalizada em todo o ecossistema.

Imagine uma web onde UIs de jogos interativos se integram perfeitamente em ambientes 3D, ou experiências de e-commerce imersivas permitem que os usuários configurem produtos com especificações HTML acessíveis e ao vivo diretamente em um showroom virtual. Visualizações de dados poderiam transcender telas planas, tornando-se elementos interativos dentro de um espaço 3D totalmente explorável, oferecendo clareza e engajamento sem precedentes. Esta API promete preencher a lacuna entre experiências gráficas ricas e as capacidades robustas e acessíveis de HTML, CSS e JavaScript padrão. Das demos virais de Alyx e Dominik às explorações criativas de Sawyer, os primeiros experimentos apenas sugerem as profundas transformações que aguardam as experiências web quando o HTML in Canvas amadurecer para uma tecnologia web fundamental, inaugurando uma nova era de criatividade digital.

O que é HTML in Canvas?

HTML in Canvas é um recurso experimental do navegador, atualmente disponível no Chrome Canary, que permite aos desenvolvedores renderizar conteúdo HTML e CSS totalmente interativo diretamente dentro de um canvas 2D ou WebGL.

Como começo a usar HTML in Canvas?

Você precisa usar um navegador que o suporte, como o Chrome Canary, e habilitar a flag 'Experimental Web Platform features'. Você pode então usar o atributo `layout-subtree` e novas funções de desenho como `drawElementImage`.

O HTML in Canvas está pronto para sites de produção?

Não. É atualmente uma proposta experimental com problemas de desempenho conhecidos, bugs e potenciais alterações na API. Não é recomendado para uso em produção até que se torne um padrão web estável.

Quais são os principais benefícios de usar HTML no Canvas?

Resolve grandes desafios em aplicações baseadas em canvas, aproveitando a renderização nativa de HTML do navegador. Isso melhora muito a acessibilidade, a qualidade do texto, a internacionalização e simplifica a criação de UIs complexas em cenas gráficas.