HTML5における表現力向上に期待がかかるのがCanvasやWebGLです。とはいえこれまでのHTML並に書きやすいという訳ではなく、描画や操作をするには異なる技術の習得が必要になります。 そこで使ってみたいのがKonva、2DをCanvas上に描画するためのライブラリになります。

Konvaの使い方

サンプルです。すべてCanvasで書かれています。

ドラッグ&ドロップ対応です。

Konvaは多くの機能を掲げていますが、主立ったものを紹介すると、オブジェクト指向のAPI、ネスト可能、高パフォーマンスなイベントハンドリング、レイヤーサポート、ノードキャッシュ、アニメーション/トゥイーンサポート、フィルター、セレクターサポート、デスクトップ/スマートフォンサポート、AMDサポートなどがあります。

形状は四角、三角、円、テキスト、画像、線、多角形、SVGパスが使えます。Canvasを使ってオブジェクトを描く際にはKonvaを使うと手軽になりそうですね。

KonvaはHTML5/JavaScript製、GPL/MIT Licenseのオープンソース・ソフトウェアです。

Konva - JavaScript 2d canvas framework konvajs/konva