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

1 min読了の目安(約300字TECH技術記事

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

できたもの

やったこと

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