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); 

  
<canvas id="test" style="border: 1px solid blue;" ></canvas>

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

Answer 2

For TypeScript/Angular:

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