Glitch in my script moving images
<p>I'm getting a strange glitch in my javascript (logic error) i'm not sure if its my maths or the way i have structured my code.</p>

<p>The idea i have is to left click and drag to scroll around a map on a canvas. It works perfectly except, when i mouse down to scroll a second time, the map resets back to its x0y0 offset.</p>

<p>So essentially i can't keep scrolling because as soon as i let go of the mouse and mousedown again its back to the start.</p>

<p>So this is how i did it:</p>

<pre><code>//this is in the init function called on body load
canvas.addEventListener("mousedown", mousePos, false);
</code></pre>

<hr>

<pre><code>//relevant functions
    function mousePos(e){
            mousex = e.pageX;
            mousey = e.pageY;               
            canvas.addEventListener("mousemove", movePos, false);
    }

    function movePos(e){
    canvas.addEventListener('mouseup',onMouseUp,false);
    offset_x = e.pageX - mousex; //pixels to move the map along x
    offset_y =  e.pageY - mousey; //pixels to move the map along y
    }

    function onMouseUp(){
     // on mouse up stop moving the map
    canvas.removeEventListener('mousemove',movePos,false);
    }
</code></pre>

<p>Any ideas?</p>
