Click Heat Map Generator With jQuery And Canvas - Heatmap.js

File Size: 7.95 KB
Views Total: 2241
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Click Heat Map Generator With jQuery And Canvas - Heatmap.js

Heatmap.js is a very light (3kb unminified) jQuery plugin that lets you generate a click heat map on an HTML5 canvas element to visualize where your visitors left or right click on the web content.

How to use it:

1. Load the jQuery heatmap.js plugin along with the latest jQuery library in the html document.

<script src="//"></script>
<script src="js/jquery.heatmap.js"></script>

2. That's it. The plugin will automatically generate a canvas based click heat map on your webpage. The html structure should be like this:

<div id="heatmapDiv1" style="">
  <p id="heatmapP1">0</p>
  <canvas id="heatmapCanvas1" style="width: 560px; height: 290.333px; border: 1px solid black;"></canvas>

3. Style the Heat Map Generator in the CSS whatever you like:

#heatmapDiv1 {
  /* container styles */

#heatmapP1 {
  /* counter styles */

#heatmapCanvas1 {
  /* canvas styles */

4. The default heat map options.

  // Sets the starting number for counting
  count: 0,   

  // Enables/disables counting
  disableCount: false, 

  // Enables/disables the button
  disableButton: false, 

  // The refresh speed of the shown count number
  refreshSpeed: 300, 

  // Multiplies the heatmap's size with the given value
  resize: 1, 

Change log:


  • Added white space for readability.


  • New options.


  • Changed the style to increase readability.

This awesome jQuery plugin is developed by onatuner. For more Advanced Usages, please check the demo page or visit the official website.