Fabric.js Javascript Canvas Library

JSでのCanvas操作を簡単かつ高機能にできる「Fabric.js」
canvasのネイティブAPIは若干分かりづらいという方も多そうですが、このライブラリを使えばオブジェクト指向で楽々Canvasプログラミングが出来そうです
単に便利にコーディングできるようになるだけでなく、オブジェクトをマウスで拡大や回転できるなどといった色々な機能も盛り込まれていて便利そうです



ネイティブAPIだと、四角形を描画するのに、次のようなコードを書きます。



これが、Fabric.jsを使うと次のように、とても分かりやすくなります。fillRectの引数の順ってどうだっけ？と毎回リファレンスを牽く必要もなくなりますね



他にもドキュメントを参照すれば、CanvasをネイティブAPIで書く面倒さを理解できるはず

デモページも結構充実しており、眺めればどんなことができるのか分かるはず



関連エントリ

• jQuery風に簡単にCanvasを扱えるラッパーライブラリ「Canvas Query」
• canvasを使って画像をスタイリングするチュートリアル
• オープンソースのHTML5お絵かきウィジェット「Literally Canvas」
• Canvasベースのお絵かきが実装できるjQueryプラグイン「Sketch.js」
• CSS3やCanvas、JS等を使ったローディング画像実装プラグイン１２
• HTML5のcanvasをもっと簡単に操作できる「KineticJS」