Delete a mark on canvas using angular 8

Question

I have a scenario where I have an image of a car and the user marks the damaged points everything works fine. My problem is i cant delete a specific point and how i save the image with points/marks . There any solution can help me ?

I use angular 8 and canvas html element and save all draw points on a array Above my code

thanks in advance ! Html

<div class="text-center">
    <canvas id="canvas" width="640" height="480"
     (click)="getPosition($event)" style="cursor:crosshair"
     [style.background-image]="urlImg">
     Not support</canvas>
</div>
  <div class="row">
   <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 mb-2">
      <div class=".container p-3">
            <div class="text-center">
                <div class="header">
                     <h4>Checklist - Observações</h4>
                 </div>
                 <div class="body text-center">
                     <ul class="list-group" *ngIf="markers.length > 0">
                         <li class="list-group-item"
                              *ngFor="let mk of markers;">
                                      {{mk.index}}-{{mk.observacao}} 
<button  mat-icon-button color="warn" (click)="deleteMark(mk)">
         <mat-icon>delete</mat-icon>
</button>
                         </li>
                     </ul>
                  </div>
                  </div>
                  </div>
                  </div>
                  </div>

this.urlImg = "url(assets/images/cars/SUV.png)"; 
ngOnInit() {
    
    this.element = (this.root as Element);
    this.canvas = (document.getElementById("canvas") as HTMLCanvasElement);
    this.ctx = this.canvas.getContext("2d");    
  }

getPosition(event) {

    // this.ctx.save();
    // tslint:disable-next-line:one-variable-per-declaration
    let qtdMarkers = 0;
    let curleft = 0;
    let curtop = 0;
    qtdMarkers = this.markers.length + 1;
    curleft += event.offsetX;
    curtop += event.offsetY;

    const mark = { index: qtdMarkers, offsetX: curleft, offsetY: curtop };
    console.log(this.markers);

     this.markers.push({ index: qtdMarkers, offsetX: curleft, offsetY: curtop, observacao: result.data.obs });
     this.drawCoordinates(curleft, curtop, qtdMarkers);

  }
drawCoordinates(x, y, qtdMarkers) {

    const grd = this.ctx.createLinearGradient(0, 0, 170, 0);
    grd.addColorStop(0, "black");
    grd.addColorStop(1, "red");
    this.ctx.fillStyle = grd; // Red color

    this.ctx.beginPath();
    this.ctx.font = "16px Arial";
    this.ctx.fillText(qtdMarkers, Number(x), Number(y));
    this.ctx.closePath();    
  }
deleteMark(mark: any) {
    const foundIndex = this.markers.findIndex(
      (x) => x.index === mark.index
    );

    // for delete we use splice in order to remove single object from DataService
    this.markers.splice(foundIndex, 1);
    console.log(mark);
/// here i try to delete a draw point 
    this.ctx.clearRect(mark.offsetX, mark.offsetY, this.ctx.width, this.ctx.height);    
  }

Please help me ! I have this job and I'm late because of this situation ! I try to use fabric but i had no success too !

Sorry for my english Bye Igor