ejemplo completo de como escribrir sobre una imagen typescript

ex.ts

import { Component,ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  @ViewChild('myCanvas') canvas: any;
  @ViewChild('imagen') imagen: any;
  canvasElement: any;
  imagenHTML: any;
  ctx:any;
  urlImagenCanvas:any;

  constructor(public navCtrl: NavController) {


  }

    ngAfterViewInit(){
        this.canvasElement = this.canvas.nativeElement;
        this.imagenHTML = this.imagen.nativeElement;
        this.ctx = this.canvasElement.getContext('2d');
    }

    escribrir(){
        this.canvasElement.width = this.imagenHTML.width;
        this.canvasElement.crossOrigin = "Anonymous";
        this.canvasElement.height = this.imagenHTML.height;
        this.ctx.font = "36pt Verdana";

            this.ctx.clearRect(0,0,this.canvasElement.width,this.canvasElement.height);
            this.ctx.drawImage(this.imagenHTML, 0, 0);
            this.ctx.fillStyle = "blue";
            this.ctx.fillText('kevin',200,120);
            this.ctx.fillText('34159181',200,220);
      this.urlImagenCanvas = this.canvasElement.toDataURL();
    }

}


//HTML

// Es MUY importante que la imagen este no visible
<img #imagen  src=",,/../assets/cupon.png" style="display:none" crossorigin="anonymous"/>

  <button (click)="escribrir()">Save</button>


<canvas style="display:none" #myCanvas></canvas>

<img #imagen  style="    max-width: 600px;" [src]="urlImagenCanvas"/>