JavaScript の Canvas をドラッグするプログラム

JavaScript の Canvas に描いた図形をキャンバスごと動かすプログラムを書いてみました。

やりかたは、普通にキャンバスを作って、draggable(handle, container) 関数にそのキャンバスを登録するだけです。draggable 関数はオブジェクトを動かすためのハンドルと全体のオブジェクトを別に指定できるようにしていますが、キャンバスはそれ自身がハンドルになるので、draggable(canvas1, canbas1) のようにハンドルとコンテナに同じものを登録します。

下のキャンバスの画像をマウスでドラッグしてみてください。キャンバスがドラッグで動かせるようになるだけでいろいろな活用法がありそうです。