Как получить допуск вокруг координат каждого холста angular 8

Question

Итак, я пытаюсь реализовать метод пароля для изображения в приложении angular 8. До сих пор я был в состоянии сделать это. Я использую CanvasRenderingContext2D, чтобы получить координаты мыши (x, y), когда мышь щелкает в любом месте холста. Затем я собираю эти координаты, добавляю их в одну строку и отправляю в бэкэнд вместе с именем пользователя для аутентификации.

проблема в том, что пользователь должен щелкнуть точно такие же координаты холста, чтобы пройти аутентификацию правильно. вот мой код:

home.component. html

<div (load)='draw()'>   
  <canvas #myCanvas width="500" height="500" id='canvas'>
  </canvas>
  <div class="form-group">
    <button  class="btn btn-primary" (click)="submitUser()">Proceed</button>    
  </div>
</div>

home.component.ts

ngAfterViewInit(): void {    
    const canvasEl: HTMLCanvasElement = this.myCanvas.nativeElement;
    this.context = (<HTMLCanvasElement>this.myCanvas.nativeElement).getContext('2d');
    let background = new Image();
    background.src = "assets/images/test.jpg";
    //this.context.lineWidth = 3;
    //this.context.lineCap = 'round';
   // this.context.strokeStyle = '#000';
    background.onload = () =>{
      this.context.drawImage(background,0,0,500,500);
      this.draw();
      this.captureEvents(canvasEl);
    }   
  }

  private getMousePosition(canvas, event) {
    let rect = canvas.getBoundingClientRect();
    let x = event.clientX - rect.left;
    let y = event.clientY - rect.top;

    // let tileWidth  = Math.round(canvas.width / this.columns);
    //   let tileHeight = Math.round(canvas.height / this.rows);
    let tileWidth  = Math.round((event.offsetX/7) * 2 - 1);
    let tileHeight = Math.round((event.offsetY/7) * 2 - 1);
    this.dataList.push(tileWidth +" , "+tileHeight);

    console.log("Coordinate x: " + tileWidth,
      "Coordinate y: " + tileHeight);
    console.log(this.dataList);
  }

  private captureEvents(canvasEl: HTMLCanvasElement) {

    // @ts-ignore
    fromEvent(canvasEl, 'mousedown').subscribe((res:[MouseEvent, MouseEvent]) =>{
      this.getMousePosition(canvasEl, res);
    });
  }

Я ищу способы получить допуск вокруг координат каждого холста, поэтому пользователю не нужно быть точным. Спасибо заранее