title: Paper.js, gap between cursor and canvas
body: <p>I am trying to build a simple drawing app with Paper.js. I can draw with the mouse  but I have a gap between the cursor and the line drawn on the canvas. </p>
  
  <p>I have realised that the navigation menu on top of the webpage is pushing down the cursor (100px) I assume that the mouse coordinates are taken from top-left (0-0) of the window and the same coordinates are used on the canvas which measured these points from its own top-left corner (see the screenshot). I have tried setting the canvas position to absolute, which helps to get it to the top left corer, but I need it in the center of the window.</p>
  
  <p>How could I fix this?</p>
  
  <p>Thanks!</p>
  
  <p><a href="https://i.stack.imgur.com/lHrLH.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lHrLH.jpg" alt="enter image description here"></a></p>
  
  <p>script:</p>
  
  <pre><code>...
      var doc = $(document),
              win = $(window),
              canvas = $('#paper'),
              ctx = canvas[0].getContext('2d')
  
      doc.on('mousemove',function(e){
              if($.now() - lastEmit &gt; 30){
                  socket.emit('mousemove',{
                      'x': e.pageX,
                      'y': e.pageY,
                      'drawing': drawing,
                      'id': id                
                  });
  
                  lastEmit = $.now();
              }
  
              // Draw a line for the current user's movement, as it is
              // not received in the socket.on('moving') event above
              // (because he only broadcats (not receiving))
  
              if(drawing){
  
                  drawLine(prev.x, prev.y, e.pageX, e.pageY);
  
                  prev.x = e.pageX;
                  prev.y = e.pageY;
              }
          });
  
  
  
  
          function drawLine(fromx, fromy, tox, toy){
              console.log(fromy + ' ' + toy);
  
              ctx.moveTo(fromx, fromy);
              ctx.lineTo(tox, toy);
              ctx.stroke();
          }
  </code></pre>