HTML-in-Canvas: HTML コンテンツを Canvas に直接レンダリングする新しい API の提案

(github.com/WICG)

6 ポイント投稿者 GN⁺ 2025-08-07 | まだコメントはありません。 | WhatsAppで共有

HTML-in-Canvasは、ウェブ上で <canvas> 要素内に** HTML 要素/コンテンツを直接描画できる新しい標準 API**を提案する WICG のプロジェクトです
複雑なテキストレイアウト、アクセシビリティ、国際化、品質/パフォーマンスの問題を解決するために登場し、チャート・UI・ゲームメニューなどの様々な Canvas 活用ケースで HTML スタイリングを直接活用可能
drawElement、texElement2D、setHitTestRegions などの新規メソッドを通じて、HTML 要素を Canvas 2D または WebGL コンテキストにそのままレンダリングおよびテクスチャ化可能
インタラクション領域、アクセシビリティ改善、3D シーン内 2D UI、CSS/HTML ベースレイアウトなど、実務的なウェブアプリ開発者のニーズを反映
現在 Chrome Canary (138.0.7175.0 以上) では実験的フラグとして有効化可能で、主要なフィードバック・バグレポートを歓迎しています

概要と重要性

HTML 要素を直接 <canvas> に描画できる新しい APIを提案
従来は複雑なレイアウトやテキスト、HTML ベースコンテンツを <canvas> に簡単にレンダリングする方法がなく、アクセシビリティ・国際化・性能・品質面で制約があった
HTML-in-Canvasはこれらの補完策として、2D キャンバスおよび WebGL内で HTML レンダリングをサポートし、チャートツール、リッチテキストボックス、ゲーム UI など幅広い領域での適用性を高める

スタイルが適用されたテキストおよびレイアウトコンテンツをキャンバス内で表現
- 例: チャートの凡例、軸、リッチエディターのボックス、ゲーム内メニューなど
アクセシビリティの強化
- 既存の Canvas で発生していた代替コンテンツと実際にレンダリングされた内容の不一致問題を解消
- 新しい API によりアクセシビリティ情報の同期調整が可能
HTML と WebGL シェーダーの組み合わせ
- CSS フィルター効果を超えて、一般的な WebGL シェーダーとの HTML 統合ニーズに対応
3D コンテキスト内 HTML レンダリング
- ゲーム/サイトの 3D 領域にリッチな 2D コンテンツを挿入可能

<canvas layoutsubtree> 属性で canvas の子 HTML 要素のレイアウトを有効化（ただし、基本的には視覚的にのみレンダリングし、ページ探索など UA アルゴリズムには公開されない）
CanvasRenderingContext2D.drawElement(element, x, y, options)
- canvas の子 HTML 要素を指定位置にレンダリング
- options.allowReadback で個人情報漏えい防止を制御（将来的に tainting ポリシーを適用）
- dwidth/dheight パラメータで必要なサイズへリサイズ可能
WebGLRenderingContext.texElement2D(...)
- 指定 HTML 要素を WebGL テクスチャとして直接描画し、3D シーンで活用
setHitTestRegions
- 特定領域に描画された要素と Canvas イベント（ヒットテスト）を連携し、マウス/タッチイベントを自動的にリダイレクト
fireOnEveryPaint オプション (ResizeObserver)
- HTML の変更/再配置時に canvas の再レンダリングタイミングを自動検出して再描画をトリガー

drawElement 呼び出し時、canvas transform matrix (CTM) が反映され、要素の border box 内にのみ画像がクリップ
canvas に描画された画像は静的（レンダリング後に要素が変わると再度 drawElement が必要）
オフスクリーンまたは DOM に存在しない canvas は未サポート（技術的な制約）
インタラクション要素（ボタン、フォームなど）は描画可能だが、自動的にインタラクティブになるわけではない
クロスオリジン iframe、SVG foreignObject などは未サポート
アクセシビリティ、セキュリティ・プライバシー（PII）に関する問題は継続的に議論中

complex-text サンプル: canvas 上に HTML スタイルのテキストやボックスなど複雑なレイアウトを drawElement で直接描画
webGL サンプル: texElement2D で HTML コンテンツを WebGL テクスチャとして生成し、3D キューブにマッピング
text-input サンプル: setHitTestRegions と fireOnEveryPaint を活用して入力フォームなどのインタラクティブ領域を表示