画像を CANVAS に取り込んで、マウスクリックした点を基準にスクロールにより拡大・縮小、ドラッグにより移動します。
利用法：clickZoom(画像ＵＲＬ); 画像サイズとキャンバスサイズを適宜調整してください。
●画像を読み込むのではなく、既にキャンバスにある画面を対象にして拡大・移動をする機能にしたかったのですが、うまくいきません。残念です。
ソースコードを別ウインドウに表示してください。
画像の読込みは、これが定番の形式です。参照：「画像ファイルのＣＡＮＶＡＳ表示」
canvas.addEventListener(パラメタ名, 処理関数名);
「パラメタで指定したイベントが発生したとき、処理関数を実行せよ」という意味です。
ここに掲げられているように、マウスの動作はパラメタに与えらています。
一般に、マウス操作には、標準的な処理が定められていますが、ここではマウスが押してから離すまで（マウス押下中 = false ）の間は、特殊な処理に変更する必要があります。ここではそれを定めています。<
説明の必要はないでしょう
マウス押下中は、ここで true になり、mouseup, mouseout で false に戻ります。
本来なら、ここでクリックした点を特定すべきですが、それはズーム処理の中で行っています。
画像をキャンバスに表示するには、左上の点（クリック時左端、クリック時上端）が必要です。ここでは左上の点を計算することを目的にしています。
右辺に、「拡大後」が出てきますが、最初のときはその初期値 (0,0) になります。それ以降はズームやドラッグが行われるので、その計算結果としての「拡大後」の値になります。
ブラウザ画面には、canvas, img, dev かどの要素があります。getBoundingClientRect とは、それらの要素が置かれている部分を長方形（rect）とし、その上下左右の位置を戻します。e.targetとはイベントが発生した対象（ここではキャンバス）のことです。
rect.left とはキャンバスの左端のブラウザ画面でのＸ座標になります。
e.clientX とはイベントが発生した（クリックされた）点のＸ座標ですが、これもブラウザ画面での座標です。
キャンバス内でのクリック点の座標は、クリック位置Ｘ = e.clientX - rect.left; で計算できます。
ここで、拡大後画像幅・高と拡大後上左端を計算します。
それをctx.drawImageでズーム後の画像をキャンバスに表示をします。元の image を変えるのではなく、キャンバスに表示する範囲と拡大比率を調整していることに注意してください。
なお縮小したりドラッグすると、キャンバスに image のデータがない部分が生じます。その部分を空白にするために、ctx.clearRect でいったんキャンバス全体を消してから、拡大後の画像を表示しています。
ズーム処理と同じような考え方です。ズーム処理での拡大後画像幅・高がドラッグ中位置Ｘ・Ｙに対応しており、拡大時（この場合はドラッグ時というべきでしょうが）の上左端を計算しています。