Web開発には昔から「DOMかcanvasか」という二者択一があった。DOMは検索やアクセシビリティに強いが複雑な描画は苦手で、canvasは自由に描けるが描いた文字はただの絵としてしか扱われない。Chromeチームが5月19日に公開した「HTML-in-Canvas API」のオリジントライアルは、この積年の構造問題に踏み込む試みだ。

仕組み

HTML要素をcanvas内に配置し、その変形(transform)をcanvas側の描画と同期させることで、要素は見た目上canvasの中にありながら、実体としては本物のDOM要素であり続ける。ページ内検索、テキスト選択、コピー&ペースト、アクセシビリティツリーへの反映といった、通常のDOM要素が持つ機能がそのまま働く。試すにはChrome Canary 149以降でchrome://flags/#canvas-draw-elementを有効にするか、オリジントライアルに登録する必要があり、提供期間はChrome 148から150までとされている。

過去の試みとの違い

DOMとcanvasを橋渡しする発想自体は新しくない。SVGのforeignObject要素も似た目的で使われてきたが、パフォーマンスや対応範囲の制約から限定的な用途にとどまっていた。HTML-in-Canvas APIがブラウザのレンダリングパイプラインにより深く統合される形で提案されている点は、過去の代替手段より本格的な解決を目指しているように見える。

現時点での立ち位置

ゲームエンジンやデータビジュアライゼーションのライブラリ開発者にとっては、アクセシビリティ対応を個別に実装せずに済む可能性がある点が魅力だろう。ただしオリジントライアル段階であり、仕様は今後変わりうる。動向はChrome for Developersの記事(https://developer.chrome.com/blog/html-in-canvas-origin-trial)で追える。