title: Angular 6 - Not able to add text on canvas dynamically
body: <p>I have created canvas element. Once user add some text with the help of keyboard, on click of done button I want to add text on canvas. I did below changes</p>
  
  <p><strong>1. image-home.html</strong></p>
  
  <pre><code>&lt;canvas  (drop)="drop(event)" (dragover)="allowDrop(event)" no-bounce width="400px" height="400" 
        (touchstart)='handleStart($event)' (touchmove)='handleMove($event)' 
        [ngStyle]="{'background': '#fff url(' + selectedImage + ') no-repeat 0 0', 'background-size' : 'contain',
        'background-position': 'center', 'background-size': '400px!important 400px!important'}" #canvas &gt;&lt;/canvas&gt;
  </code></pre>
  
  <p><strong>2. image-home.component.ts</strong></p>
  
  <pre><code>import { Component, ViewChild,  ElementRef} from '@angular/core';
  
  @ViewChild('canvas') public canvas: ElementRef;
  
  sendMessage(userData: string){
      console.log('entered text', userData);
      this.canvasElement = this.canvas.nativeElement;
      let ctx = this.canvasElement.getContext('2d');
      ctx.font = 'italic 18px Arial';
      ctx.textAlign = 'center';
      ctx. textBaseline = 'middle';
      ctx.fillStyle = 'red';  // a color name or by using rgb/rgba/hex values
      ctx.fillText('Hello World!', 150, 50); // text and position
      //this.canvasElement.fillText(userData, 10, 50);
      this.nativeKeyboard.hideMessenger(this.options);
    }
  </code></pre>
  
  <p>SendMessage function will get call on click of done button of keyboard. I am not getting any error but not able to see text on canvas.</p>