CanvasはHTML5においてWebの表現力を飛躍的に高めてくれるAPIですが、その使い方に慣れるまでが意外と面倒なものに感じます。通常のDOMのようにスタイル設定ですぐに表示を変化できるのではなく、描画した内容をリフレッシュしながら使わなければなりません。 そんなCanvasに柔軟性を持たせてくれそうなライブラリがcanvas-areaになります。

canvas-areaの使い方

デモです。まずはドラッグ。マウスで表示領域を変えられます。

次にズームイン/アウト。スクロールで表示する大きさを変えられます。

さらにCanvas自体の大きさをマウスで変えられます。

canvas-areaを使うと表示が静的に思えたCanvasが柔軟にコントロールできるようになります。マウスのドラッグやスクロールを使うので操作が直感的で、様々な場面で使えそうです。

canvas-areaはHTML5/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

canvas-area goessner/canvas-area: Lightweight HTML container element as a controller parent for one or more canvas elements