【要約】HTML-in-Canvas を p5.js Web Editor で少し試してみる [Qiita_Trend] | Summary by TechDistill
> Source: Qiita_Trend
Execute Primary Source
// Problem
従来のCanvas描画において、開発者は高度なUI表現の実現に苦慮してきた。特に、CSSによる複雑なスタイリングをCanvas上で再現しようとすると、描画ロジックが極めて複雑化する問題がある。具体的には以下の課題が挙げられる。
- ・CSSのグラデーションやドロップシャドウをCanvasで再現するコストが高い。
- ・Canvas内の描画と、DOM要素が持つアクセシビリティやイベント機能を両立させるのが困難である。
- ・p5.jsのようなライブラリでは、HTML-in-Canvas専用のAPIが標準実装されていない。
// Approach
筆者はp5.js Web Editorを用い、Chromeの実験的機能であるHTML-in-Canvasを活用して、DOM要素をCanvas内に統合する実装を行った。実装にあたっては、ライブラリの制約を回避するために以下の手順を採用している。
- ・
drawingContextを介して、標準のdrawElementImage()やrequestPaint()を直接操作する。 - ・Canvas要素に
layoutsubtree属性を付与し、HTML要素をCanvasの直接の子要素として配置する。 - ・
requestAnimationFrame内でrequestPaint()を呼び出し、描画ループを制御する。 - ・Canvas上の描画位置とDOMの
transformプロパティを同期させ、クリック判定等の整合性を保つ。
// Result
p5.jsの描画機能とHTMLのスタイリングを組み合わせ、高度な視覚効果を実現した。実験的機能の有効化手順から、具体的な実装コードまでが明示されている。得られた成果は以下の通りである。
- ・回転やせん断を適用した「Blue Card」の描画。
- ・
clip()と組み合わせ、波打つ動きを実現した「Pink Card」の描画。 - ・
ctx.filterを用いて、発光効果を与えた「Yellow Button」の描画。 - ・HTML-in-Canvasが利用できない環境でのエラーハンドリングの実装。
Senior Engineer Insight
> 本技術は、CSSの柔軟性とCanvasの描画性能を融合させる画期的なアプローチである。しかし、ブラウザの実験的機能に依存しており、現時点での実戦投入はリスクが高い。特に、DOM要素とCanvas上の座標を同期させる実装コストは、大規模なシステムでは無視できない。実用化には、ブラウザ標準への組み込みと、ライブラリレベルでの抽象化が不可欠である。プロトタイピング用途としては、極めて有用な技術と言える。