HTML-in-Canvas API

何か#

<canvas> の子要素として置いた DOM 要素を、canvas の描画コンテキスト(2D / WebGL / WebGPU)にピクセルとして描く API 群。設計の核は二層構造にある。

• DOM 層: 子要素は layoutsubtree 属性付き canvas の直接の子として実 DOM に存在し続ける。アクセシビリティツリー、フォーカス、find-in-page、テキスト選択、CSS レイアウト計算、ヒットテストはこの層で動く。子要素自体のペイントは画面に出ない。
• canvas 描画層: drawElementImage() を呼ぶたびにブラウザが DOM 要素のスナップショットを canvas に転写する。画面に見えるのはこのピクセルだけ。

1
<canvas layoutsubtree>
2
  ├ DOM 層(実在): <input> はフォーカス・入力、<p> は a11y・検索の対象
3
  └ 描画層: ctx.drawElementImage(content, x, y) の戻り値 transform を
4
            content.style.transform に入れて DOM 位置を描画位置に合わせる

子要素に指定した CSS transform は描画には使われず、ヒットテストとアクセシビリティの位置計算にだけ使われる。drawElementImage() が返す DOMMatrix を element.style.transform に代入して両者を同期させるのが基本パターン。

なぜ生まれたか — 従来手法の限界#

canvas の fallback content は実描画と一致する保証がなく、スクリーンリーダー・find-in-page・翻訳が canvas 内のテキストに届かない。これを埋めてきた手法はどれも根本解ではなかった。

提案の系譜#

著者は Google と Igalia のメンバー 7 名。前身の drawElement / texElement2D という名前は WebGL の gl.drawElements() との混同を避けて drawElementImage / texElementImage2D に改名された。

API サーフェス(2026-06 時点の WebIDL)#

1
partial interface HTMLCanvasElement {
2
  [CEReactions, Reflect] attribute boolean layoutSubtree;
3
  attribute EventHandler onpaint;
4
  void requestPaint();
5
  ElementImage captureElementImage(Element element);
6
  DOMMatrix getElementTransform((Element or ElementImage) element, DOMMatrix drawTransform);
7
};
8

9
interface mixin CanvasDrawElementImage {
10
  DOMMatrix drawElementImage((Element or ElementImage) element, double dx, double dy);
11
  // dWidth/dHeight 付き、sx/sy/sWidth/sHeight 付きのオーバーロードあり
12
};
13
CanvasRenderingContext2D includes CanvasDrawElementImage;
14
OffscreenCanvasRenderingContext2D includes CanvasDrawElementImage;
15

16
partial interface WebGLRenderingContext {
17
  void texElementImage2D(GLenum target, GLenum internalformat,
18
                         (Element or ElementImage) element,
19
                         optional WebGLCopyElementImageConfig config = {});
20
};
21
partial interface GPUQueue {
22
  void copyElementImageToTexture(GPUCopyElementImageSource source,
23
                                 GPUCopyElementImageDestination destination);
24
};
25

26
[Exposed=(Window,Worker), Transferable]
27
interface ElementImage { readonly attribute double width; readonly attribute double height; undefined close(); };
28
interface PaintEvent : Event { readonly attribute FrozenArray<Element> changedElements; };

Chrome 150.0.7869.0 で WebGL の texElementImage2D が 5 引数から 3 引数 + config に、WebGPU の copyElementImageToTexture がディクショナリ形式に変わった(Issue #132)。OT 期間中にシグネチャが動く前提で、try { 新 } catch { 旧 } のフォールバックが推奨されている。

セキュリティ・プライバシーモデル#

描画できる情報は白リストで制限される。クロスオリジンコンテンツ(他オリジンの iframe)、訪問済みリンクのスタイル、スペルチェックマーカー、オートフィルのプレビュー、OS のテーマ色・アクセシビリティ色設定は描画から除外される。フォント描画の差がフィンガープリントに使われる懸念と、セキュリティ文書に TODO が残っている点がコミュニティで指摘されている。

標準化とブラウザ対応(2026-06-14 時点)#

WHATWG HTML への統合 PR #11588 は open のまま。TAG レビュー #1204 は進行中で、Google / Igalia 単独推進を TAG が懸念している。open issue は 32 件で、シェーダー歪み時のヒットテスト(#140)、style.transform に流し込む設計(#135)、直接の子要素しか描けない制限(#134)などが残る。将来の retained mode(canvas がコマンドバッファを保持し、スクロールやアニメーションをメインスレッドなしで自動更新)は設計段階で具体的な PR はない。

機能検出と graceful degradation#

1
const supported =
2
  "layoutSubtree" in HTMLCanvasElement.prototype &&
3
  "drawElementImage" in CanvasRenderingContext2D.prototype;

非対応ブラウザでは layoutsubtree canvas の子要素がそのまま通常の DOM として表示される。「fallback content = 実際の描画内容」という設計なので、degradation は API レベルで保証されている。

向く用途・向かない用途#

CSS / SVG で足りる場合はこの API は過剰。すりガラスは backdrop-filter: blur(8px) saturate(180%)、カスタムカーネルや変位マップは SVG filter(feConvolveMatrix・feDisplacementMap)、レイヤー合成は mix-blend-mode、遷移のモーフィングは View Transitions で済むことが多い。

エコシステム(2026-06 時点)#

• Three.js r184(2026-04-16): THREE.HTMLTexture と InteractionManager が実験的に追加(PR #31233)。InteractionManager が毎フレーム CSS matrix3d を計算し、ブラウザがポインタ・ホバー・フォーカス・入力をネイティブに処理する。
• PlayCanvas: WebGL バックエンドで対応済み(device.supportsHtmlTextures で検出)。WebGPU は未対応。getElementTransform() で DOM と投影行列を同期する HtmlSync を提供。
• Babylon.js: フォーラムで議論のみ、公式ロードマップなし。
• React Three Fiber / drei: 固有の抽象化は見当たらない(Three.js 経由では原理的に可能)。
• 公式デモサイト(html-in-canvas.dev)が 17 本のリファレンス実装を公開。

現実的な使いどころ(OT 段階)#

1. プログレッシブエンハンスメントとしての視覚効果(Chrome だけ強化、他は通常 HTML)。
2. 使用ブラウザを Chrome に固定できる内部ツール・ダッシュボード。
3. デモ・ポートフォリオ・クリエイティブ作品。
4. html2canvas をフォールバックに残した段階的移行。

関連#

• HTML-in-Canvas の実現性(a11y・性能・セットアップ・シェーダー)
• モダン CSS / Web API の対応状況(2025-2026)

更新履歴#

• 2026-06-14: 初版(ローカル調査ノート)
• 2026-10-17: Wiki へ移植、概念ページとして再構成