HTML-in-Canvas の実現性(a11y・性能・セットアップ・シェーダー)

a11y・フォーカス・入力#

• layoutsubtree 付き canvas の子要素は通常の DOM ノードと同じくアクセシビリティツリーに公開される。描画元が実 DOM なのでツリーは自動で同期する(仕様の言い方では “Drawn elements are the fallback content”)。find-in-page・テキスト選択・スペルチェック・辞書参照・ブラウザ拡張からのアクセスも動く。
• Issue #11: 描画前の子要素も支援技術 API に公開されてしまう。暫定回避は hidden / inert / aria-hidden で手動制御。
• フォーカス挙動は維持され、レイアウトに参加するので getBoundingClientRect() も有効な値を返す。フォーカスリングが canvas 描画面に正しく出るかは一次情報に明記がない。
• ヒットテストは DOM 上の位置を基準に行う。drawElementImage() が返す transform を element.style.transform に入れて追従させる。

1
canvas.addEventListener("paint", () => {
2
  ctx.reset();
3
  ctx.translate(250, 150);
4
  ctx.rotate(angle);
5
  ctx.translate(-250, -150);
6
  const transform = ctx.drawElementImage(content, 0, 0);
7
  content.style.transform = transform.toString(); // DOM 位置と描画位置を同期
8
});

• シェーダーで歪めた場合: 仕様は「子要素の CSS transform は描画では無視され、ヒットテストと a11y にだけ効く」と明記している。フラグメントシェーダーで視覚的に歪めた結果はヒットテストに反映されない。Elastic Bulge デモも歪み領域下の要素へのヒットテストは実装していない。「歪みあり + ヒットテスト正確」は現状サポート外で、逆行列による補正は仕様外の独自実装になる(Issue #140)。
• IME: “Real cursors, real selection, real autocomplete” をうたうデモはあるが、CJK の IME 変換フローが canvas 内の <input> で動くことを実証した一次情報は確認できなかった。

性能・再描画モデル#

• paint イベントは子要素の描画が変化したときだけ、1 フレームに 1 回発火する。paint 内の canvas 描画は同フレームに反映され、DOM 変更は次フレームに回る。
• requestPaint() を呼ばなければ paint は発火せず、静止コンテンツでは GPU 描画ループが止まる。毎フレーム再描画にはならない。
• 「将来の auto-updating(retained)モード」は未実装。スクロールや CSS アニメーションをメインスレッドなしで追従させる構想はあるがスケジュール未定。
• getImageData() は canvas コマンドバッファの同期フラッシュを要する可能性がある。WebGL の texElementImage2D は CPU ラウンドトリップを避けて GPU テクスチャに直接書くので、2D context 経由の getImageData より効率がよい。
• 特定の CSS プロパティでクラッシュする報告があるが、具体的なプロパティ一覧は公開されていない。60fps 維持時・500 要素超の DOM・モバイルでの発熱やバッテリーの定量データは公開情報にない。

セットアップ#

1
<canvas id="canvas" layoutsubtree>
2
  <div class="content">
3
    <h1>Hello</h1>
4
    <input type="text" placeholder="名前">
5
    <button>送信</button>
6
  </div>
7
</canvas>

1
const canvas = document.querySelector("canvas");
2
const ctx = canvas.getContext("2d");
3
const content = canvas.querySelector(".content");
4

5
canvas.requestPaint(); // 初回の発火を要求
6
canvas.addEventListener("paint", () => {
7
  ctx.reset();
8
  const transform = ctx.drawElementImage(content, 0, 0);
9
  content.style.transform = transform.toString();
10
});

1
const gl = canvas.getContext("webgl2", { alpha: true, premultipliedAlpha: true });
2

3
// paint の中から requestAnimationFrame 経由で呼ぶ。直接呼ぶと
4
// 'no cached paint record for element' になる
5
canvas.addEventListener("paint", () => requestAnimationFrame(render));
6

7
function render() {
8
  gl.texElementImage2D(gl.TEXTURE_2D, gl.RGBA, content); // Chrome 150+ の 3 引数形式
9
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
10
}

1
device.queue.copyElementImageToTexture({ source: el }, { destination: { texture } });
2

3
const img = canvas.captureElementImage(el); // Transferable。Worker に postMessage で送れる
4

5
const m = canvas.getElementTransform(el, drawTransform); // WebGL/WebGPU での DOM 同期用

シェーダー適用パターン#

1. paint イベント内で requestAnimationFrame(render) を呼ぶ。
2. render() で gl.texElementImage2D() によりテクスチャを更新する。
3. フラグメントシェーダーでテクスチャをサンプリングしてエフェクトをかける。
4. gl.drawArrays() で描く。

1
precision mediump float;
2
varying vec2 v;
3
uniform sampler2D u;
4
void main() {
5
  vec4 c = texture2D(u, v);
6
  vec3 tint = mix(vec3(1.5, 0.5, 0.5), vec3(0.5, 0.5, 1.5), v.x);
7
  gl_FragColor = vec4(c.rgb * tint * c.a, c.a);
8
}

Three.js r184 の InteractionManager が毎フレーム CSS matrix3d を計算して DOM をメッシュに追従させ、PlayCanvas は getElementTransform() ベースの HtmlSync を提供する。いずれも「視覚的に歪めた領域ではヒットテストがずれる」点は同じで、エフェクトによってはアクセシビリティを損なう。

未解決(2026-06 時点)#

1. canvas 内 <input> での CJK IME 変換フロー。
2. フォーカスリングの視覚表示タイミング。
3. 発熱・バッテリー・60fps の定量データ。
4. シェーダー歪み下のヒットテスト補正の公式手段。
5. Firefox・Safari の実装見通し。
6. retained(auto-updating)モードの仕様化時期。
7. クラッシュを起こす CSS プロパティの具体的な一覧。

関連#

• HTML-in-Canvas API

更新履歴#

• 2026-06-11: 初版(ローカル調査ノート)
• 2026-10-17: Wiki へ移植、概念ページとして再構成。冒頭に定義を追加