ツイートブラウザ上で画像を自由に配置するというツールを作りたかったのです。HTMLのCanvasをそのまま使う?元々Canvasをそのまま使っていたのですが、そのまま使うとレイヤーもなくドラッグ&ドロップ、拡大縮小なども自分で実装しなければいけません。扱う画像が増えてくるととても面倒です。私の希望する用途ではオブジェクト選択、拡大・縮小が標準で実装されているFabric.jsがよさそうでした。準備としては普通のjsと同じように読み込むだけです。JQueryとの依存関係はありません。今回はソースを短くするために、JQueryも使います。動かしてみる試しに赤い四角を書いてみることにします。'red',}));});</script></body></html>ソース上では赤い四角を追加しているだけです。実際に動かしてみると、赤い四角がクリックで選択できるようになっており、ドラッグ・ドロップ、回転などができます。画像を読み込む本来の目的である、画像を読み込む場合です。ソースはHTML部分に変更はないので、スクリプト部分だけ抜き出します。{oImg.scale(0.5);canvas.add(oImg);});});</script>時計画像が読み込まれてステップ1と同じようにクリックで選択できるようになっており、ドラッグ・ドロップ、回転などができます。画像が大きいのでscaleで半分にしています。ちなみにイラストはイラストレインさんhttps://illustrain.com/からお借りしています。画像を複数読み込むステップ2の続きで複数順番に読み込みます。300);canvas.add(oImg);});});</script>scaleToWidthで横幅を100に統一しています。縦横比を保ったまま幅を制限してくれるようです。scaleToHeightも設定すれば、縦横の決められた大きに入るように指定できると思われます。そのほかには、leftで横位置を指定しています。画像を制御させないようにする最初の目的と矛盾していますが、全部制御したいわけではないのです。位置は移動させてもいいですが、回転は不要だったり、ある画像は固定させたい等です。右下だけ残すcanvas.add(oImg);});});</script>まず、canvasに対してselectionをfalseにしています。これはグループ選択を無効にします。一つのオブジェクトに対して特定の操作をoffにしても、グループ選択で拡大縮小回転がされたりするためです。時計はhasRotatingPointにより回転させなくします。こたつはhasControlsにより拡大縮小回転のコントロールをoffにしています。窓は選択自体させないようにしたため、移動もできません。そのままそこに貼り付けられたままです。タンスはsetControlsVisibilityにより、オブジェクト選択時のコントロール(□が出るもの)を個別にoffにしています。右下だけ残すことにより、縦横比を保ったまま等倍での拡大縮小のみさせるようにしています。コントロールできる画像には、lockScalingFlipを設定することにより、裏返しにならないようにしています。ステップ4のデモまとめかなり細かく楽に制御できるため、使いやすいです。