title: Using addEventListener to add a callback with arguments
body: <p>I'm creating a drag and drop system using a canvas.</p>
  
  <pre><code>      canvas.addEventListener('mousedown', function () {
            window.initialClickX = mouse.x;
            window.initialClickY = mouse.y;
            window.initialBallX = ball.x;
            window.initialBallY = ball.y;
            canvas.addEventListener('mousemove', onMouseMove, false);
        }, false);
  
       function onMouseMove(){
          ball.x = mouse.x + window.initialBallX - window.initialClickX;
          ball.y = mouse.y + window.initialBallY - window.initialClickY;
          draw();
       }
  </code></pre>
  
  <p>When I click, I need to store the values for the initial mouse position and the initial ball position, so I can correctly drag the ball around.</p>
  
  <p>The above code works perfectly, but I think it looks messy with all the global variables. I'd like onMouseMove to be able to accept the parameters initialClickX, initialClickY, initialBallX and initialBallY. But how can I add these parameters to the callback function?</p>
  
  <p>Or if there is a better way to do this please let me know, thanks. </p>