Paper.js, пробел между курсором и холстом

Question

Я пытаюсь создать приложение простого рисования с Paper.js. Я могу рисовать с помощью мыши, но у меня есть разрыв между курсором и линией, нарисованной на холсте.

Я понял, что меню навигации сверху веб-страницы нажимает курсор (100 пикселей). Я предполагаю, что координаты мыши берутся из левого верхнего угла (0-0) окна и используются одни и те же координаты на холсте, который измерял эти точки из своего верхнего левого угла (см. скриншот). Я попытался установить положение холста в абсолютное, что помогает получить его в верхнем левом углу, но мне нужно его в центре окна.

Как я могу это исправить?

Спасибо!

сценарий:

... 
    var doc = $(document), 
      win = $(window), 
      canvas = $('#paper'), 
      ctx = canvas[0].getContext('2d') 

    doc.on('mousemove',function(e){ 
      if($.now() - lastEmit > 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(); 
     } 

Answer 1

Я Репрографический проблему с помощью ранней версии paperjs - а именно эта версия является один на jsfiddle. Я вижу, что линии смещаются так, как вы делаете с v 0.22, а затем правильно отображаются с версией 0.9.25. Вот мой код:

<!-- fails --> 
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/paper.js/0.22/paper.js'></script> 

<!-- works --> <!-- 
<script type='text/javascript' src='https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.25/paper-full.js'></script> 
--> 

<style type='text/css'> 
    #canvas1{ 
     height: 400px; 
     width: 400px; 
     border: 1px solid black; 
    } 
</style> 

<script type='text/javascript'> 
    paper.install(window); 

    window.onload = function() { 
     paper.setup('canvas1'); 
     var path = new Path(); 
     var tool = new Tool(); 
     path.strokeColor = 'black'; 
     tool.onMouseMove = function(event) { 
      path.add(event.point); 
     } 

    } 
</script>