Paper.js，光标和画布之间的差距(Paper.js, gap between cursor and canvas)

 我正在尝试使用Paper.js构建一个简单的绘图应用程序。 我可以使用鼠标进行绘制，但在光标和画布上绘制的线之间存在间隙。 
 
 我已经意识到网页顶部的导航菜单正在向下推动光标（100px）我假设鼠标坐标是从窗口的左上角（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();
        }

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. 
 
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.
 
How could I fix this?
 
Thanks!
 
 
script:
 
...
    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();
        }

原文：https://stackoverflow.com/questions/33068419