はてなブックマークレポート：HTML-in-Canvasで作る未来のWeb UI表現

📌 このスライドの要約

Webプラットフォームに2026年に登場した新機能 「HTML-in-Canvas」 について、株式会社ICSの池田泰延氏が解説した登壇資料です。HTML-in-Canvasとは、HTML・CSSでレイアウトされたコンテンツの「見た目」をそのままCanvasに取り込めるようにする技術で、Canvas 2D / WebGL / WebGPU の描画APIから利用できます。スライド内では「HTMLにCanvasの表現力を加える」「CanvasにHTMLの機能を加える」という双方向のメリットが、豊富なデモとともに紹介されています。

なお本スライドはモーションを多用するテーマのため、著者はSlideShareでの視聴ではなくYouTubeでの視聴を推奨しています。

🆕 HTML-in-Canvasとは何か

ブラウザーがレイアウトしたHTML・CSSの見た目を、Canvasにテクスチャとして取り込める機能
利用できるのは Canvas 2D（図形・文字・画像の平面描画）／ WebGL（GPUで2D・3D描画）／ WebGPU（2D・3D描画とGPU計算） の3つの描画API
主な活用場面：
- 画面遷移の演出（歪み・変形エフェクト）
- 3D空間へのHTMLコンテンツの配置
- ポストエフェクト（屈折・渦巻き・波などのシェーダー加工）
- ウェブページの画像化・動画化
業界の反応は絶賛ムード：
- CSS-Tricks創設者 Chris Coyier 氏：「今年もっとも予想外で驚かされた機能はHTML-in-Canvas！」（2026年9月）
- Google Chrome の Una Kravets 氏：「Webでできることが大きく変わる、めったにない瞬間のひとつ」（Google I/O 2026）

🎨 方向性1：HTMLにCanvasの表現力を加える

CSSの filter や backdrop-filter は「用意された効果」しか指定できません（iOS 26のLiquid Glass風表現も backdrop-filter のぼかしが中心）。HTML-in-Canvasなら：

HTMLをブラウザーでレイアウト
その2D画像をCanvasへテクスチャとして取り込み
シェーダーで自在に加工（屈折・渦巻き・波など）

ページ全体にCanvasエフェクトをかけた画面遷移デモなどが紹介されています。

✍️ 方向性2：CanvasにHTMLの機能を加える

美しい日本語の文字組

Canvasの fillText() によるテキスト描画は折り返しができないなど貧弱です。HTML-in-Canvasなら、HTML＋CSSの高度な文字組機能をそのままCanvasに持ち込めます：

font-feature-settings: "palt" 1; … 文字詰め
line-break: strict; … 厳密な禁則処理（小さい仮名を行頭に置かない）
word-break: auto-phrase; … 文節単位（助詞の後ろ）で折り返す
text-autospace: normal; … 日本語と英語の間に余白を自動挿入

マシンリーダブルなCanvas・入力フォーム

fillText() で描いた文字は「ただの画像」だが、HTML-in-Canvasでは文字もDOMとして存在し、DevToolsのアクセシビリティツリーに表示される
Canvasタグの中にHTMLの入力フォーム（テキスト入力・ボタン）を配置可能で、Lighthouseのアクセシビリティ監査もクリア

ポイント：Canvasの弱点（美しい文字組・DOM構造・入力フォーム）をHTMLで補える。HTML-in-Canvasは演出だけではなく、実務のフロントエンド開発にも役立つ技術。

🛠 実装方法（Canvas 2Dの場合）

Canvasの子要素としてHTML（描画対象のカード等）を配置
paint イベントでHTMLの更新通知を受け取り、ctx.drawElementImage() で描画
canvas.requestPaint() で再描画を要求
ctx.translate() や ctx.rotate() で移動・回転も可能。Canvas 2Dではヒットエリア（クリック範囲）もブラウザーが自動同期

注意点：シェーダーによる波形状の変形は、HTMLのクリック範囲（ヒットテスト）には反映されない。 precise hit testing は課題として議論中（WICG/html-in-canvas issue #148）。

🖼 ウェブアプリへの応用：記事カードジェネレーター

URLからOGP情報（記事タイトル・画像）を取得し、カード風のPNG画像を生成するデモ
外部サイトへのアクセスはブラウザーのクロスドメイン制約があるため、OGP取得はバックエンド（Node.js）で行う
Node.jsのCanvasライブラリー（node-canvas等）では複雑な日本語の文字組ができないため、美しい文字組はブラウザーのHTML・CSSで行い、Canvasに転写してPNG化（toBlob() + clipboard.write() でクリップボードへコピー）
技術構成：ブラウザー（React Suspenseでスケルトン表示）＋ Node.js（React Server Componentで記事情報を取得）
CSSの text-fit: shrink; や text-box: trim-both text; といった新しいプロパティも活用

📚 対応ライブラリー

VFX-JS（Stable Fluid / CRT / Halftone / JPEG Glitch などのエフェクト）… https://amagi.dev/vfx-js/
Canvas UI（Cloth / Asciify / Liquid / Shatter など）… https://canvasui.dev/
Three.js … https://threejs.org/
PixiJS … https://pixijs.com/

🌐 対応ブラウザー（2026年10月11日時点）

ブラウザー	対応状況
Chrome 155	対応（フラグ設定・オリジントライアル）
Edge 155	対応（同上）
Firefox 157.0.1	未対応
Safari 27.0	未対応（WebKitで実装中）

さらに Chrome 157 で2026年11月3日に正式提供予定とのことで、まもなくフラグなしで使えるようになる見込みです。

⚖️ 類似技術（SVG foreignObject）との比較

HTMLを画像化する既存手法としてSVGの <foreignObject> がありますが、HTML-in-Canvasには以下の優位点があります：

比較項目	SVGのforeignObject	HTML-in-Canvas
CSSの文字組	SVG内のHTMLにCSSを指定	ページのCSSをそのまま利用
HTMLの更新	SVG画像を作り直す必要	paintイベントで自動更新
Webフォント	外部URLから読み込み不可	ページのフォントを利用可能
外部画像	外部URLのまま表示不可	HTML内の画像を利用可能
入力・文字選択	不可	可能（マシンリーダブル）

🕰 まとめ：Canvasタグの歴史と位置づけ

2004年：Canvas 2D（WebKitにCanvas要素を導入）
2011年：WebGL（GPUで3D描画）
2018年：OffscreenCanvas（Worker側で描画）
2023年：WebGPU（GPUで描画・計算）
2026年：HTML-in-Canvas（HTML・CSSのレイアウトをCanvasへ。Canvas 2D・WebGL・WebGPUで利用可能）

HTML-in-Canvasは、「HTML・CSSの文字組・レイアウト・入力」と「Canvasの加工・合成・3D」のいいとこどりを実現する、Web表現を大きく広げる機能といえます。