HTML5のCanvasに追加された図形などをユーザーが操作可能にする 「Fabric.js」というライブラリを紹介します。 この記事はある程度Canvasの知識がある方を対象に構成しています。 Fabric.jsの特徴 Canvas操作の簡略化やアニメーション機能など基本的な機能以外に、 下記の他ライブラリには見られない機能があります。 Canvasは通常、図形などを描画してしまうとCanvas上の絵として 扱われてしまい、図形としては扱えません。 Fabric.jsを使用すると、Canvasに描画した図形や画像、テキスト (以後オブジェクト)はFabric.jsによって個別に管理され、 ユーザーがハンドルで操作できるようになります。 ※ハンドルとはオブジェクトの周りに表示される、操作点の事です。 オブジェクトの操作について 操作性はMicrosoft Officeの図形操作に近いです。