title: Drawing with canvas doesn't follow cursor
body: <p>I'm creating a drawing application with HTML5 canvas. It works accept for one thing. The drawing happens like ~50px down/right from the cursor. Below is my code, is it possible to tell why this is happening?</p>
  
  <pre><code>var letsdraw = false;
  
  var theCanvas = document.getElementById('paint');
  var ctx = theCanvas.getContext('2d');
  theCanvas.width  = 420;
  theCanvas.height = 300;
  
  
  $('#paint').mousemove(function(e) {
      if (letsdraw === true){
          ctx.strokeStyle = 'blue';
          ctx.lineWidth = 100;
          ctx.lineCap = 'round';
          ctx.beginPath();
          ctx.moveTo(e.pageX, e.pageY);
          ctx.lineTo(e.pageX, e.pageY);           
          ctx.stroke();
      }
  });
  
  $('#paint').mousedown(function(){
      letsdraw = true;
  });
  
  $('#paint').mouseup(function(){ 
      letsdraw = false;
  });
  </code></pre>