title: Move an already created rectangle in canvas
body: <p>I am trying to move an item in canvas by clicking and dragging the object. I am using <code>paperjs</code>. Here is my code:</p>
  
  <p>I drawing a rectangle as follows:</p>
  
  <pre><code> var rect = new paper.Path.Rectangle(new paper.Point(100, 100), new  paper.Point(200, 250));
      rect.strokeColor = 'black';
      rect.fillColor = 'red';
      rect.strokeWidth = 5;
  </code></pre>
  
  <p>To move the rect, I am creating a <code>Tool</code> and attaching events to it.</p>
  
  <pre><code>onSelectShape(){
          const self = this;
          const hitOptions = {
            segments: true,
              stroke: true,
              fill: true,
        tolerance: 5
          };
  
  
          const toolSelect = new paper.Tool();
          toolSelect.activate();
  
  
          let segment, path;
          toolSelect.onMouseDown = function(event) {
  
              const hitResult = self.project.hitTest(event.point, hitOptions);
        console.log(hitResult);
              if (!hitResult){
                  return;
              }
              if (hitResult) {
                  path = hitResult.item;
              }
  
          };
  
          toolSelect.onMouseMove = function(event) {
              self.project.activeLayer.selected = false;
              if(event.item){
                  event.item.selected = true;
              }
          };
  
          toolSelect.onMouseDrag = function(event) {
  
              if (path) {
  
                  path.position += event.delta;
              }
          };
      }
  </code></pre>
  
  <p>Here is the complete <a href="https://stackblitz.com/edit/angular-jdl3wf" rel="nofollow noreferrer">Stackblitz</a> link. I am not sure why it is not working. Any help would be highly appreciated</p>