How to draw empty rectangle on canvas using mouse in angular 9

Question

I am trying to implement the logic for drawing a rectangle on the canvas image. So basically first I am drawing image on the canvas. I want to provide the functionality of drawing a rectangle on that canvas image using a mouse.

  mdEvent(e) {
    //console.log("mouse down");
    var target = e.target || e.srcElement || e.currentTarget;
    var idAttr = target.attributes.id;
    var value = idAttr.nodeValue;
    this.canvasPage = value;
    
    let cElement: any = document.getElementById(this.canvasPage);
    let context: any = cElement.getContext("2d");
    let l = cElement.getBoundingClientRect().left;
    let t = cElement.getBoundingClientRect().top;
    let r = cElement.getBoundingClientRect().right;
    let b = cElement.getBoundingClientRect().bottom;
    //console.log("points ", this.startX - l, this.startY - t);
    this.startX = ((e.clientX - l) / (r - l)) * cElement.width;
    this.startY = ((e.clientY - t) / (b - t)) * cElement.height;

    this.drag = true;
  }

In the above code - I am taking starting positions of the mouse on canvas image for drawing

mmEvent(e) {
    //console.log("mouse move");
    var target = e.target || e.srcElement || e.currentTarget;
    var idAttr = target.attributes.id;
    var value = idAttr.nodeValue;
    this.canvasPage = value;
    if (this.drag) {
      let cElement: any = document.getElementById(this.canvasPage);
      let context: any = cElement.getContext("2d");
   

      let l = cElement.getBoundingClientRect().left;
      let t = cElement.getBoundingClientRect().top;
      let r = cElement.getBoundingClientRect().right;
      let b = cElement.getBoundingClientRect().bottom;
      //console.log("points ", this.startX - l, this.startY - t);
      let mousex = ((e.clientX - l) / (r - l)) * cElement.width;
      let mousey = ((e.clientY - t) / (b - t)) * cElement.height;

      context.beginPath();
      let width = mousex - this.startX;
      let height = mousey - this.startY;
      context.strokeStyle = "yellow";
      context.lineWidth = 2;
      context.strokeRect(this.startX, this.startY, width, height);
    }
  }

In the above code- mouse move event in which I am drawing rectangle by getting width and height by subtracting starting points from current points.

 muEvent(e) {
    this.drag = false;
  }

In the above code - Drawing is finished by making drag false.

Output when I draw:

I have already tried clearing rectangle but it is clearing the image that I have drawn on the canvas.

HTML snippet

 <canvas class="canImg" #canvasDoc [attr.id]="'docCanvas'+index" [style.width]="zoomWidth + 'px'" 
                (mousedown)="mdEvent($event)" 
                  (mousemove)="mmEvent($event)" 
                  (mouseup)="muEvent($event)">
              </canvas>
              <img class="imgTag" #docImg src="{{image.page_obj}}" [style.width]="zoomWidth + 'px'" [attr.id]="'docImg'+index"
                (load)="onLoad(image.page_obj,index)" style='display: none;'>

Above code description:- Above code is in *ngFor . It iterates over number of images that we get from server. I am calling onLoad function on every image on image tag. Inside on load function we are just drawing image using onload .