title: how to move rectangle and take coordinates as globle to crop the selected image
body: <p>i am a trainee software engineer and i am working on angular CLI  for my learning process. it is image cropping stuff on canvas. i draw a circle  on when click on it.</p>
  
  <p><strong>My question is how to move the circle with mousedown and stop it when mouse up
  and take (x ,y) coordinate as gloable to change final crop image.</strong></p>
  
  <p>here is my html...</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-sm-6"&gt;
      &lt;canvas #layout1 id="layout1" width="500" height="300" 
          (mousedown)="mouseDown($event)" 
          (mouseup)="mouseUp($event)" 
          (mousemove)="coordinates($event)"&gt;
          This text is displayed if your browser does not support HTML5 Canvas.
      &lt;/canvas&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6"&gt;
          &lt;img class="crope-image" src="{{profPic}}" #photo style="width:500px; height:300px;"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>here is my typscriptfile...</p>
  
  <pre><code>export class FourComponent implements OnInit {
  ....some code here...
  
  @ViewChild('layout1') canvas;
  @ViewChild('photo') photo;
  
  mouseDown(event: MouseEvent): void {
  this.rect.startX = event.pageX - this.offsetLeft;
  this.rect.startY = event.pageY - this.offsetTop;
  this.drag = true;
  const _canvas = this.canvas.nativeElement;
  this.event = event;
  console.log('kkkk');
  
  this.context.strokeStyle = 'black';
  this.context.beginPath();
  this.context.arc(this.clientX, this.clientY - 130, 50, 0, 2 * Math.PI);
  this.context.stroke();
  
  const _photo = this.photo.nativeElement;
  _photo.setAttribute('src', _canvas.toDataURL('image/png'));
  this.profPic = _canvas.toDataURL('image/png')
  
  }
  
  mouseUp(event: MouseEvent): void {
  this.drag = false;
  this.event = event;
  }
  
  coordinates(event: MouseEvent): void {
  this.clientX = event.clientX;
  this.clientY = event.clientY;
  this.isMouseDown = event.buttons === 1;
  }
  
  
  ngOnInit() {
  const _canvas = this.canvas.nativeElement;
  const _photo = this.photo.nativeElement;
  
  this.context = (&lt;HTMLCanvasElement&gt;_canvas).getContext('2d');
  this.image = new Image();
  this.image.src = '../../assets/images/1.jpg'
  
  this.image.onload = () =&gt; {
    this.context.drawImage(this.image, 0, 0, _canvas.width, _canvas.height);
    console.log(this.image.src);
    _photo.setAttribute('src', _canvas.toDataURL('image/png'));
    this.profPic = _canvas.toDataURL('image/png');
   };
   console.log(this.clientX + ',' + this.clientY);
   }
   }
  </code></pre>
  
  <p>this is my css file...</p>
  
  <pre><code>#layout1{
  border:1px solid #d3d3d3;
  }
  #subcanvas{
  border:1px solid #d3d3d3;
  }
  
  .crope-image{
  border:1px solid #d3d3d3;
  }
  }
  </code></pre>
  
  <p>here is my view now
  <a href="https://i.stack.imgur.com/IVUKC.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IVUKC.png" alt="enter image description here"></a></p>
  
  <p>Thank You...</p>