Chrome ganha API para inserir HTML interativo em cenas de Canvas

O Chrome ganhou uma API que permite inserir elementos HTML interativos diretamente em cenas de Canvas 2D e 3D. Para quem cria jogos, editores e experiências visuais na web, a mudança abre espaço para combinar gráficos elaborados com texto selecionável, botões e outros recursos do HTML.

O anúncio foi feito no blog Chrome for Developers. A novidade não muda a navegação de uma hora para outra: os desenvolvedores precisam adotar a API nos próprios sites e aplicativos. Mas ela pode tirar um obstáculo antigo do caminho de quem constrói experiências visuais no navegador.

Chrome aproxima os recursos do HTML e do Canvas

Até aqui, os desenvolvedores tinham de escolher entre duas ferramentas com vantagens diferentes. O HTML oferece formatação de texto, acessibilidade, botões interativos e seleção de conteúdo. Já o Canvas dá mais controle sobre gráficos e efeitos visuais, mas trata o texto desenhado nele como pixels, que não podem ser selecionados, copiados ou pesquisados como texto comum.

Uma saída era colocar elementos HTML por cima do Canvas. Só que eles podiam sair do alinhamento durante a rolagem ou o zoom. Com o HTML-in-Canvas, segundo o anúncio do Chrome, os elementos podem ser renderizados dentro da própria cena gráfica, sem abrir mão de recursos como selecionar, copiar e traduzir o texto.

A versão 157 também recebeu uma atualização de segurança com correções para 83 vulnerabilidades, um assunto diferente da API, mas que afeta a mesma versão do navegador. Veja o que a atualização de segurança do Chrome 157 corrigiu.

API do Chrome pode entrar em jogos 3D e editores web

Entre os usos possíveis estão livros 3D interativos, experiências imersivas de WebXR e editores de mídia. Em uma demonstração compartilhada por Abderrahmen Gharsallah, a técnica aparece em um site de produto com uma experiência de anúncio interativa. É aí que a combinação pode dar mais jogo: efeitos visuais elaborados sem transformar textos e controles em imagens sem interação.

Para começar, quem desenvolve precisa definir content="drawable" no elemento Canvas e marcar os elementos HTML que serão desenhados com o atributo drawable. Em um contexto 2D, a renderização pode ser feita com drawElementImage(). WebGL e WebGPU exigem etapas adicionais, detalhadas na documentação técnica do Chrome.

O ganho, portanto, depende de cada equipe colocar a API em prática. Para o usuário, a diferença aparece quando um site ou aplicativo passa a combinar cenas gráficas mais ricas com texto e controles que continuam funcionando como elementos da web.

📲 Se você curte jogos e ferramentas criativas no navegador, acompanhe as novidades pelo Canal do TS no WhatsApp.

Por enquanto, o HTML-in-Canvas é uma ferramenta para desenvolvedores, não um recurso que o leitor ativa nas configurações do Chrome. O próximo passo é a adoção pelos criadores de sites e aplicativos que queiram usar a API.

Fonte: PiunikaWeb