スクロール可能なCanvasを作る

大きめの表を作りたくて、Tableとかで大量に要素を描画するよりも、Canvasだったら要素数は減らせるし、大量に描画してもパフォーマンスそこそこでるんじゃないかな？と思って簡単なモックを作ってみた。

できたもの

やったこと

• canvas要素の兄弟要素に表全体の幅と高さを持つ空の要素を追加する。スクロールのインタラクションはこの要素で処理した。
• scrollイベントを監視して、scrollLeft, scrollTopを取得し、その値を元に context.translateで表示領域をずらすように。
• 表はオフスクリーンキャンバスにした方がスクロールがぬるぬるになった。