HTML5の新機能であるCanvasですが、HTMLとは随分使い勝手が違うためになかなか手出ししづらいのではないでしょうか。2D/3Dのどちらも扱えますが、3Dになるとさらに敷居が高くなりますので、まずは2Dから入るのが良さそうです。 Canvas内で2Dオブジェクトを描くのに使えるライブラリがFabric.jsです。Fabric.jsを使ってCanvasを積極的に使ってみましょう。

Fabric.jsの使い方

デモです。様々な描画が行われています。

SVGを描くこともできます。キャッシュ機能を使うと多くのオブジェクトもスムーズに動かせます。

影をつけるデモです。アニメーションもします。

データをJSONで出力できます。

こちらはSVGでの出力結果。

Fabric.jsでは文字や画像の描画、マウスイベント、アニメーション、オブジェクトのグルーピング、マウスによる変形など様々な操作ができるようになっています。Canvasを使っていて面倒な操作に感じることもFabric.jsを使えばとても楽に描画、操作できるようになりそうです。

Fabric.jsはJavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Fabric.js Javascript Canvas Library kangax/fabric.js