Chrome for Developersは10月26日、オリジン試験を経てChrome 157でHTML-in-Canvas APIが安定版になったと公開した。canvasにc>を付け、描きたい要素にdrawableを付けると、そのHTMLをCanvasへ画像として描ける。2DではdrawElementImage()を使い、位置の同期はブラウザが既定で行う。WebGLとWebGPUでは、計算した変換行列をupdateElementGeometry()へ渡して、当たり判定とアクセシビリティ用の領域をピクセルに合わせる。
これまでの選択は、fillText()で文字をピクセルにするか、HTMLをCanvasの上に重ねるかだった。前者はスクリーンリーダー、ページ内検索、翻訳、コピーが効かない。後者はスクロールやカメラ移動で位置がずれ、3Dオブジェクトの奥にHTMLを置けない。新しいAPIでは、複数行や双方向のテキスト、フォーム、選択、右クリック、DevToolsでのCSS確認が、Canvas内でも使える。クローラーやAIエージェントが、2Dや3Dへ描いたDOMを索引できる、ともしている。
Three.jsは実験的なTHREE.HTMLTexture、Babylon.jsはHtmlTexture、PixiJSはv8.19.0のHTMLSource、PlayCanvasはsetSource()で追随している。これらはChromeチームの公式サポートではない。APIはChrome 157の機能なので、content属性が読み戻せるかで検出する。未対応なら従来の重ね合わせか、別UIへ戻す。Canvas製のデザインツールやゲームUIを持つチームは、Chromeだけで置き換えず、3D側の座標同期を先に試作した方がよい。