Ionic2 image overlay - ionic2

Question

I need some guidance/directions/code samples for image overlays in Ionic2 app.
I am capturing image using native camera and then I want to edit the captured image by adding some text like following (this is from Instaweather app):
After editing I want to share this image on social media like whatsapp etc (as of now I can share the captured image without editing, which was pretty straight forward).
I have a directive as following, but it didn't help much.
import { Directive, HostListener, Input} from '#angular/core';
#Directive({
selector: '[draw-text]'
})
export class ImageDrawTextDirective {
#Input() text: any;
#HostListener('load', ['$event.target'])
onLoad(img) {
let canvas = document.createElement('canvas');
let context = canvas.getContext('2d');
canvas.height = img.height;
canvas.width = img.width;
context.drawImage(img, 0, 0);
context.font = "50px Arial";
context.textAlign = 'center';
context.fillStyle = 'white';
context.fillText(this.text, canvas.width / 2, canvas.height * 0.8);
img.src = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
}
}
Which I was using like following:
<!-- Display the captured image with text on it -->
<img [src]="base64Image" *ngIf="base64Image" text="{{flavour}}" draw-text crossOrigin />