Glitch with my script dragging an image

[EchoFool]

Hey

 

 

I'm having an issue dragging images in my JavaScript. Although it works it keeps resetting its offset when i try to drag a second time. I use a mousedown + movemove events. When i mouse up i remove the mouse move event, then on the second mouse down to continue dragging, thats when it starts back in its start position instead of continuing on from where i left off.

 

So this is my script:

 

var offset_x = 0;
var offset_y = 0;
function mousePos(e){
      mousex = e.pageX;
      mousey = e.pageY;
      canvas.addEventListener("mousemove", movePos, false);
}
function movePos(e){
canvas.addEventListener('mouseup',onMouseUp,false);
canvas.addEventListener('mouseout',onMouseUp,false);

      dx = e.pageX - mousex; //calculate how far the mouse moved in X in pixels
      dy = e.pageY - mousey; //calculate how far the mouse moved in Y in pixels
      
      offset_x = dx;
      offset_y = dy;
}

function onMouseUp(){
canvas.removeEventListener('mousemove',movePos,false);
}




function init(){
draw();// places images in the canvas
canvas.addEventListener("mousedown", mousePos, false);

canvas.addEventListener("mousewheel", zoom, false);
}

 

 

Can any one see the mistake or cause of the issue?