Angular 6 - Not able to add text on canvas dynamically

Question

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

1. im

Answer 1

In a pure JS implementation your code works fine:

const canvas = document.getElementById('test');
canvas.width = canvas.height = 100;
ctx = canvas.getContext('2d');
ctx.font = 'italic 18px Arial';
ctx.textAlign = 'center';
ctx. textBaseline = 'middle';
ctx.fillStyle = 'red';  
ctx.fillText('Hello!', 50, 50); 

The only issue that I could see is the:
this.canvasElement = this.canvas.nativeElement;
That must not be getting the correct canvas