курсор находится не в углу холста, Angular 2

Question

Я пытаюсь нарисовать прямоугольник с холстом, изображение - это один компонент, а холст - другой, например, HTML: <canvas #canvas width="600" height="300"></canvas> .ts:

export class RectComponent implements OnInit {

  @ViewChild('canvas', { static: true })
  canvas: ElementRef<HTMLCanvasElement>;  
  
  private ctx: CanvasRenderingContext2D;
  flagStart = false;
  mouseX = 0;
  mouseY = 0;

  @HostListener('document:mousemove', ['$event']) 
   onMouseMove(e) {
     if (this.flagStart == true){
      this.mouseX = e.clientX - this.canvas.nativeElement.offsetLeft;
      this.mouseY = e.clientY - this.canvas.nativeElement.offsetTop;
      this.ctx.beginPath();
      this.draw();
    } 
  }

  draw(){
    this.ctx.clearRect(0, 0, this.canvas.nativeElement.width, this.canvas.nativeElement.height);
    this.ctx.beginPath();
    this.ctx.strokeRect(this.startX, this.startY, this.mouseX - this.startX, this.mouseY - this.startY);
  }

  ngOnInit(): void {
    this.ctx = this.canvas.nativeElement.getContext('2d');
  }

  start= (event: MouseEvent) => {   
      this.startX = event.clientX - this.canvas.nativeElement.offsetLeft;
      this.startY = event.clientY - this.canvas.nativeElement.offsetTop;
      this.flagStart = true;
  }

  stop= (event: MouseEvent) => {   
      this.width = event.clientX - this.startX;
      this.height = event.clientY - this.startY;
  }
}

Это родительский компонент, HTML: <app-rect-component> </app-rect-component> Проблема в том, что курсор находится в другом месте, чем угол, когда я его перемещаю. Я также пытался решить эту проблему, вычитая this.canvas.nativeElement.getBoundingClientRect(), но это не работает, поскольку предполагаемый прямоугольник догоняет курсор только после существенного перемещения курсора