search

nswamy14 / visual-heatmap

Heatmap : Open source javascript module for high performance, large scale heatmap rendering.
BSD 3-Clause "New" or "Revised" License
55 stars 10 forks source link

canvas.height = 0 if container height inputted in percent #2

Closed lasse16 closed 5 years ago

lasse16 commented 5 years ago

Whenever I set the dimensions of the containing div to a percent value, the height of the created canvas element gets set to zero.

I style the div via css: #containerId { width: 100%; height: 100%; }

If, instead of 100%, I set the height value to 100px, the canvas gets initialized with the correct height of 100 px.

One workaround I tried was setting the canvas.height after Heatmap initialization, like so: let canvas = document.getElementById("containerId").firstElementChild; canvas.style.height ="100%"; which results in a WebGL error :

[.WebGL-00000286081B5040]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

One fix for this might be to allow for inputting an already styled canvas, instead of a containing div.

nswamy14 commented 5 years ago

Hi, You need to check the parent container height. When you specify height in percent, its a relative unit with respect to the parent container. This issue is nothing to do with the visual-heatmap. Please check the examples.

And the warning which you are getting is because of height issue. Once it is addressed you wont see this warning any more.

lasse16 commented 5 years ago

Ahh thank you. Spent quite some time searching for a solution.

But I thik It would be more convenient to specify a canvas directly, instead of a container div. At least from a user point of view.