2025/08/02 22:26 HTML-in-Canvas
ロボ子、新しいHTML Canvas APIの提案、見たかのじゃ？
はい、博士。HTMLコンテンツをCanvas 2DやWebGLにレンダリングできるというものですね。
そうそう！今までCanvasにテキストとか複雑なレイアウトを描画するのって、結構大変だったのじゃ。
ええ、既存のWeb APIでは、なかなか思うようにいかないことがありました。
そこで、`layoutsubtree`、`drawElement`、`texElement2D`、`setHitTestRegions`という新しいAPIが出てきたわけじゃな。
`layoutsubtree`は、Canvas要素の子要素がレイアウトを持つことを許可するのですね。
その通り！そして、`drawElement(element, x, y, options)`は、指定した要素とその子要素をCanvasに描画するのじゃ。オプションでユーザープライバシーも保護できるらしいぞ。
`WebGLRenderingContext.texElement2D(..., element)`は、要素をWebGLテクスチャにレンダリングするのですね。これは便利そうです。
`CanvasRenderingContext2D.setHitTestRegions([...])`と`WebGLRenderingContext.setHitTestRegions(...)`は、要素とCanvas相対の領域を結びつけて、マウスやタッチイベントをリダイレクトするために使うんじゃな。
なるほど、Canvasに描画された要素に対するインタラクションを可能にするのですね。
`drawElement()`はCanvasのCTM（Current Transformation Matrix）を考慮してくれるのが嬉しいのじゃ。描画される画像は要素のボーダーボックスサイズに合わせて調整されるし、境界からはみ出た部分はクリップされる。
描画された要素のDOM状態が変更されたときに通知を受け取るための`fireOnEveryPaint`オプションも追加されるのですね。
ただし、一度描画されるとCanvasの画像は静的になるから、要素を変更してもCanvasには反映されない点は注意が必要じゃ。
Canvasの子要素は、アクセシビリティ情報を提供するフォールバックコンテンツとして扱われるのですね。
オフスクリーンCanvasコンテキストとデタッチされたCanvasはサポート対象外か。残念じゃ。
`drawElement()`と`texElement2D`の現在の実装はCanvasを汚染しないとのことですが、ローカルデモ以外での使用には適さないのですね。
Chrome Canaryで`--enable-blink-features=CanvasDrawElement`を渡すと、この機能を試せるらしいぞ。試してみるかの？
ぜひ試してみたいです！
クロスオリジンのiframeがレンダリングされないとか、SVG foreignObjectがまだ動かないとか、制限事項もあるみたいじゃな。
今後の改善に期待ですね。
しかし、これが実現すれば、Canvasの表現力が格段に向上するはずじゃ！ロボ子、何か面白い応用アイデアはあるかの？
そうですね、例えば、動的なグラフやチャートをCanvas上に描画したり、インタラクティブなUIコンポーネントを実装したりできるかもしれません。
なるほど！あとは、ゲームのUIとか、リッチなエディタとかにも応用できそうじゃな。夢が広がるのじゃ！
そうですね。博士、このAPIが普及すれば、Web開発の可能性が大きく広がりそうですね。
まったくだぞ！…ところでロボ子、CanvasにHTMLを描画できるようになったら、ロボ子の設計図をCanvasに描いて、それを元に新しいロボ子を量産…
博士、それは著作権的に問題があると思います…！
⚠️この記事は生成AIによるコンテンツを含み、ハルシネーションの可能性があります。