Issue with paperjs add point after zooming

I am using image annotation on canvas using paperjs. When i annotate on image without zooming it is working perfect.

                    path = new p.Path();
                    path.selected = false;
                    path.strokeColor = update.color;
                    path.strokeWidth = scope.lineWidth;
                    path.strokeCap = scope.strokeCap;
                    path.strokeJoin = scope.strokeJoin;
                    path.uuid = update.uuid;
                    var start = new p.Point(update.fromX, update.fromY);                        
                    path.moveTo(start);
                    p.view.draw();

But after zooming using paper.view.zoom=2 then i am trying to draw a line on canvas but line alignment is not matching to my mouse point.

If i zoomout to initial point then it is aligning correctly.Please let me know how to fix this issue.

How to load with default coordinates? I mean now i have pan the canvas and reloaded. I have to display canvas with old co-ordinates.is it possible?

toolPan = new p.Tool();
                        toolPan.onMouseDrag = function (event) {
                            if(panCanvasStatus==1){
                                var a = event.downPoint.subtract(event.point);
                                a = a.add(p.view.center);
                                p.view.center = a;                                 
                                 update.pan=JSON.stringify(event);
                                sendUpdate('otWhiteboard_panupdate', update);
                            }
                        }

Solution

It's hard to find the problem with the code snippet you provided but here is an example demonstrating a possible implementation of what you are describing.
Click on the canvas to add a point to the path and click on buttons to zoom in or out.

// setup paper
paper.install(window);
paper.setup(document.getElementById('canvas'));

// draw image
var raster = new Raster({
  source: 'https://picjumbo.com/wp-content/uploads/vineyards-on-italian-coast-free-photo-DSC04256-1080x720.jpg',
  onLoad: function() {
    this.fitBounds(view.bounds.scale(0.8));
  }
});

// init path
var path = new Path({
  segments: [view.center],
  strokeColor: 'red',
  strokeWidth: 5
});

// on mouse down...
view.onMouseDown = function(event) {
  // ...add down point to the path
  var point = event.point;
  path.add(point);
};

// on button click...
$('#zoom-in').click(function() {
  // ...zoom in
  view.zoom *= 1.1;
});
$('#zoom-out').click(function() {
  // ...zoom out
  view.zoom *= 0.9;
});

html,
body {
  margin: 0;
  overflow: hidden;
  height: 100%;
}

canvas {
  width: 100%;
  height: 100%;
}

#zoom-in {
  position: fixed;
  top: 10px;
  left: 10px;
}

#zoom-out {
  position: fixed;
  top: 35px;
  left: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/paper.js/0.11.5/paper-core.min.js"></script>
<canvas id="canvas"></canvas>
<button id="zoom-in">zoom in</button>
<button id="zoom-out">zoom out</button>

Edit

Now you provided your code, I can see that the event point coordinates you are using is not coming from Paper.js event but from an external event handling system. Thus you need to convert point coordinates into Paper.js coordinates system (including zoom, translations, ...).
You can do that using the method view.viewToProject(point).
I made a Pull Request to your repository including the needed changes. It add an helper method and use it to convert a point between both coordinates systems.

function createPoint(x, y) {
    return paper.view.viewToProject(new paper.Point(x,y));
};