A high performance WebGL/JS heatmap display library
CoffeeScript HTML
Switch branches/tags
Nothing to show
Clone or download
Latest commit 995d541 Jun 5, 2015


WebGL Heatmap

webgl-heatmap.js is a JavaScript library for high performance heatmap display.


Live Demo at codeflow.org

How to use it

Instantiate a new heatmap, errors can be one of:

  • Webgl is not supported
  • No floating point texture support
  • Floating point render target not supported
  • Shader Compile Error: ...
  • Shader Link Error: ...
    var heatmap = createWebGLHeatmap({canvas: yourCanvas});
    // handle the error

creation arguments

  • canvas: the canvas you wish to draw on
  • width: explicit width
  • height: explicit height
  • intensityToAlpha: defaults to true
  • gradientTexture: texture used instead of color calculation, can be path or an image

Add a data point.

  • x and y relative to the canvas in pixels
  • size in pixels (radius)
  • intensity between 0 and 1
heatmap.addPoint(x, y, size, intensity);

Add a list of data points.

  • x and y relative to the canvas in pixels
  • size in pixels (radius)
  • intensity between 0 and 1
heatmap.addPoints([{x:x, y:y, size:size, intensity:intensity}]);

Draw queued data points:


Display the heatmap


Multiply all values in the heatmap by a number (useful for decay)


Clamp all values in the heatmap to between two values:

heatmap.clamp(0.0, 1.0)

Blur all values a little:



Copyright (c) 2013, Florian Boesch pyalot@gmail.com http://codeflow.org/

WebGL Heatmap is licensed under any of the following licenses at your choosing:

  • MIT: see mit-license
  • GPL: see gplv*-license
  • BSD: see bsd-license