長年、Web開発者は高度にインタラクティブなビジュアルアプリケーションを構築する際、難しい選択に直面してきました。豊富なセマンティック機能を持つDOMに頼るか、低レベルのグラフィックス性能のために<canvas>要素に描画するかです。現在オリジントライアルで利用可能になった新しい実験的なHTML-in-Canvas APIは、このトレードオフを解消します。DOMコンテンツを2Dキャンバスや WebGL/WebGPU テクスチャに直接描画しながら、UIを操作可能、アクセシブル、かつブラウザ機能と連携した状態に保てます。
DOMはWeb UIの基盤です。組み込みのテキストレイアウトや意味的に理解されるコンテンツを提供し、テキストをハイライトしてコピーしたり、画像を右クリックして保存したりといった日常的な操作をサポートします。また、アクセシビリティツール、翻訳、ページ内検索、リーダーモード、拡張機能、ダークモード、ブラウザのズーム、オートフィルとも統合されています。WebGLやWebGPUを含むキャンバスは、高度な2Dおよび3Dグラフィックスのための低レベルなピクセルアクセスを提供し、ゲームやGoogle DocsやFigmaのような複雑なアプリがこれに依存しています。しかしキャンバスはピクセルのグリッドであるため、その中にあるUIはこれらのブラウザ連携を失い、多くの場合、重いカスタムロジックが必要になります。
HTML-in-Canvas APIはこの溝を埋めます。<canvas>要素の内部にHTMLを配置し、その変形を同期させることで、開発者は簡素化されたテキストレイアウト、表現力豊かなフォームコントロール、ネイティブのテキスト選択とコンテキストメニュー、アクセシビリティツリーへの公開、ページ内検索のサポート、クローラーやAIエージェントによるインデックス性、拡張機能との互換性、そしてChrome DevToolsでの検査を利用できます。ユースケースには、大規模なキャンバスベースのアプリケーション、3Dシーンやウェブゲーム、そして実際にインタラクティブなDOM UIを必要とするイマーシブなWebXR体験が含まれます。
出典: Hacker News · 要約：HeadlinesBriefing