How to Print dynamic text on an image and save that image(with text).

Question

In my application I have a modal. On that modal there is a button to select image. User will select image. That image i have to show in a fixed size container on modal. Then user will write some text(or notes) in a textbox, which he wants to print on image and then clicks on image.

 So that text will be printed at position where user has clicked.

Now I have to save this image with text written on it. So next time whenever I open this image it will show me image with text at same position.

My code is as follows

This is function to select image. 

onSelectFile(event: any) {
   if (event.target.files && event.target.files[0]) {
     const reader = new FileReader();
    // called once readAsDataURL is completed
     reader.onload = (event: any) => {
       this.url = event.target.result;
     };
     reader.readAsDataURL(event.target.files[0]); // read file as data url
   }
 }

 

This function is used to get x and y coordinated where user has clicked and then i have created element at runtime and I am assiging user entered text to this newly created label element.

getcoordinates(event) {
   console.log(event.offsetX);
   console.log(event.offsetY);
   this.X = event.pageX - event.offsetX - 30;
   this.Y = event.pageY - event.offsetY + 15;
   const relativeX = (event.pageX);
   const relativeY = (event.pageY);
   const txt = document.createElement("LABEL");
   txt.style.cssText = "position: fixed; color: red";
   txt.setAttribute("id", "txtarea");
   txt.innerHTML = this.itemToEditImage.Text;
   txt.style.left = relativeX + 'px';
   txt.style.top = relativeY + 'px';
   txt.style.zIndex = "9000";
   const parent = document.getElementsByClassName('container');
   parent.item(0).appendChild(txt);
 }

 HTML code is 

 

 

<div class="row">
       <div class="col-md-5">
              <div class="row">
                  <div class="col-md-3">
                          <input type="file" (change)="onSelectFile($event)">
                   </div>
              </div>
               <br>
              <div class="row">
                    <div class="col-md-1">
                      <input type="text" id="TextData" name="TextData" [(ngModel)]="itemToEditImage.Text">
                       </div>
               </div>
                 <br>
        </div>
        <div class="col-md-7">
            <div class="container my-custom-scrollbar d-inline-block">
              <img [src]="url" (click)="getcoordinates($event)" style="width: 100%; height: 100%; object-fit: scale-down;">
              </div>
         </div>
 </div>

 CSS file

.my-custom-scrollbar {
        position: relative;
        width: 500px;
        height: 500px;
        overflow: auto;
    }

    .caption {
        color: red;
        font-weight: bold;
    }

 

But the positon where user has clicked and position where text is printed are not matching. It does not print text at exact position where user has clicked. So how to pirnt text on image? Also how to save this image with text; at given path? Thank you in advance.