javascript - キャンバス画像を移動可能 (ドラッグ可能) にする

Question

キャンバス領域があり、いくつかの画像を追加しています。キャンバス画像をドラッグ可能にしたいと思っています。マウス クリックを処理するために addEventListener を介してマウス イベントを作成しました。
しかし、私の問題は、画像だけでなく、すべてのキャンバス コンテキストをドラッグ可能にできることです。

html コード:

<canvas></canvas>

JS コードの一部:

var canvas = document.getElementsByTagName('canvas')[0];
var gkhead = new Image;
var ball   = new Image;
ctx.drawImage(gkhead,0,0,1000, 200);
ctx.drawImage(ball,0,0,100,100);

canvas.addEventListener('mousedown',function(evt){
        document.body.style.mozUserSelect = document.body.style.webkitUserSelect = document.body.style.userSelect = 'none';
        lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
        lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
        dragStart = ctx.transformedPoint(lastX,lastY);
        dragged = false;
    },false);

canvas.addEventListener('mousemove',function(evt){
        lastX = evt.offsetX || (evt.pageX - canvas.offsetLeft);
        lastY = evt.offsetY || (evt.pageY - canvas.offsetTop);
        dragged = true;
        if (dragStart){
            var pt = ctx.transformedPoint(lastX,lastY);
            ctx.translate(pt.x-dragStart.x,pt.y-dragStart.y);
            redraw();
        }
    },false);

canvas.addEventListener('mouseup',function(evt){
        dragStart = null;
        if (!dragged) zoom(evt.shiftKey ? -1 : 1 );
    },false);

そして、最初のイメージ( gkhead )をキャンバス領域だけでグラガブルにし、2番目(ボール)のイメージを最初の( gkhead )イメージの領域だけで移動可能にすることはできますか?
HEREは私のフィドル
です アドバイスありがとうございます。