Demo

Usage

Rendering

// create a heatmap object given an id or canvas reference
const heatmap = new Canvas2dRenderer(canvas);
// draw the heatmap
heatmap.draw();

Rate limit rendering

You can throttle rendering per frames based on available resources. In the following example, the draw function will always be called with the latest data points with the frame rates browsers provide (e.g. 20 calls on 20fps).

// throttle draw
const frame = ensureAvailableFrames(heatmap.draw)
// run on available frame, pass any args if you have
frame.request()
// cancel a frame
frame.cancel()

Data

// set data of [[x, y, value], ...] format
heatmap.data = data

// add a data point
heatmap.addData(point);

// clear data
heatmap.clearData();

Appearance

// set point radius and blur radius (25 and 15 by default)
heatmap.setRadius(radius, blur);

// set gradient colors as {<stop>: '<color>'}
// e.g. {0.4: 'blue', 0.65: 'lime', 1: 'red'}
heatmap.setGradient(gradient);

// call in case Canvas size changed
heatmap.resizeCanvas();

DOM Screenshot with html2canvas

// you can take screenshot from DOM at a given time with data points baked in
const capture = document.querySelector('#capture')
html2canvas(capture)
  .then(canvas => {
    document.body.appendChild(canvas)
    canvas.style.display = 'none'
    return canvas
  })
  .then(canvas => {
    const image = canvas.toDataURL('image/png')
    // do whatever with data and then remove the canvas
    canvas.remove()
  })

Development

• Clone this repository.
• Install dependencies using yarn install or npm install.
• Start development server using yarn dev.
• Follow the Conventional Commits Specification for opening PRs.

License

MIT