canvas heat maps for node and the browser


Heatmaps for node.js and the browser, groovy!


var heatmap = require('heatmap');
var heat = heatmap(500, 500, { radius : 30 });
for (var i = 0; i < 5000; i++) {
    var rho = Math.random() * 2 * Math.PI;
    var z = Math.pow(Math.random(), 2) * 200;
    var x = 250 + Math.cos(rho) * z;
    var y = 250 + Math.sin(rho) * z;
    heat.addPoint(x, y);
var fs = require('fs');
fs.writeFileSync('blob.png', heat.canvas.toBuffer());


var heatmap = require('heatmap');

Create a new heatmap from an existing canvas element, a numeric width and height, or an option object with canvas or width and height fields.

Optionally, you can set the opts.radius and opts.threshold to control the rendering a little.

Add a point to the heatmap with a radius.

params can have:

  • radius, defaults to heat.radius || 20
  • weight, defaults to 0.1

Scale the canvas by the coefficients x and y.

If y is undefined, scale both x and y by the first parameter, x.

Render all the points onto the canvas element.

The HTML Canvas element.

Protip: with the canvas module for node you can heat.canvas.buffer() to get a Buffer with a PNG file all up in it.


With npm, just do:

npm install heatmap