visual-heatmap in Vue.js

[Nikhil-Shenoy]

Hi, I am trying to instantiate and render a heatmap using the Vue.js library, but I'm not able to visualize the heatmap that I want. I have copied the code almost identically to what you have in heatmap1.html, but I am not seeing my image nor the heatmap. Could you help me figure out what is going wrong? I have attached the file containing the single file component. Essentially, I create the heatmap instance and assign it to the test_canvas, then I generate some data, and then attempt to render that data. I do not get any errors in the console, but no image shows up and no heatmap is rendered. I tried to adjust the size of the div to encompass the whole screen, but I still don't see anything.

Heatmap.zip

[nswamy14]

apply the below style on the canvas element and also check the height and width of the element.
Check the stackblitz example: https://stackblitz.com/edit/vitejs-vite-vcrvq1?file=src%2Fcomponents%2FHelloWorld.vue

`<style>

canvas {
left: 0;
top: 0;
}

</style>`