Accepted answer

Code in component is correct, issue was in html wrapping the <canvas> tag inside <div> has solved the issue as said in comment by @Quan Vo


<div><canvas id="canvas"></canvas></div>

Why <canvas> tag should be inside <div> tag, for this one can refer this article

In Short:

The HTML5 Canvas element is an HTML tag similar to the <div>, <a>, or <table> tag, with the exception that its contents are rendered with JavaScript. In order to leverage the HTML5 Canvas, we'll need to place the canvas tag somewhere inside the HTML document, access the canvas tag with JavaScript, create a context, and then utilize the HTML5 Canvas API to draw visualizations.

Related Query

More Query from same tag