Use Canvas with Angular Ionic - difficulty saving the image with text appended to it

I'm trying to use Canvas with Angular Ionic but having difficulty saving the image with text appended to it, any ideas?

The image Url is coming from an API and I have created an image overlay using css to append the text from the ion-textarea

Here is the HTML:

 <ion-content no-bounce>
  <ion-card>
    <ion-img id="mycanvas" src={{webFormatUrl}}>
    </ion-img>
    <div class="myOverlay">
      <div class="card-title">{{DisplayQuote}}</div>
      <div class="card-subtitle"></div>
    </div>
  </ion-card>
  <ion-item>
    <ion-textarea expand="full" [(ngModel)]="DisplayQuote" placeholder="Enter Inspirational Quote Here">
    </ion-textarea>
  </ion-item>
  <ion-item>
    <ion-button>Convert to Quote</ion-button>
  </ion-item>
</ion-content>

The image loads like this (see the Image attached) in the browser with the overlay and I add text with the input so I just need to save it as is!

You will have to create and load those elements on a canvas element, then save it.

Use a canvas element instead of that image + overlay.

<canvas id="quoteCanvas"></canvas>

Access the element from the component/view controller.

@ViewChild('quoteCanvas', {static: true}) canvas!: ElementRef;

Do your composition with another method, that could be triggered on ion-textarea's ngModelChange:

updateCanvas() {
  const ctx = this.canvas.nativeElement.getContext('2d');
  // ...
}

Then store/download it with another method, that could be triggered with that button:

onDowloadButtonClick() {
  canvas.toBlob(blob => {
    // Store it
  });
}