Responsive heatmap.js on resize event handler

Question

First of all, I am using ReactJS and heatmap.js library.

The HTMLDivElement that is used as heatmap.js entry point should be responsive. At every window resize it adjusts based on the current window size.

However, the canvas created by the heatmap.js library object takes the initial dimensions of the div, so it's size remains the same.

How could I make the children canvas responsive too?

The heatmap.js config JSON is the following:

this.heatmap = Heatmap.create({
  container: this.image
});

The variable this.image is a reference to a HTMLDivElement that it is given dynamically the width and height attributes.

<div  style={{ width: `${width}px`, height:`${height}px`}} />

*If you're not familiar with JSX syntax, I could transform it into plain HTML/CSS/JS.

Answer 1

一种解决方案是将画布设置为高度和宽度的100％，但包含在响应式<div> 。