2d hotmap

from http://www.somethinghitme.com/2012/06/06/2d-metaballs-with-canvas/

by jpeter06

HTML

<div id="buttons">
  <button id="changeB" onclick="cambiarRender()">change</button>
  <button id="stopB" onclick="stop()">stop/move</button>
</div>
<div id="canvasContainer" >
  <canvas  id="canvas"></canvas>
  <canvas  id="canvasB"></canvas>
</div>

CSS

html,body{
width:100%;  
height:100%;
margin:0px;
padding:0px;
overflow:hidden;
display:flex;
justify-content: center;
 align-items: center;
 flex-direction:column;
}

#canvasContainer canvas{
  position: absolute;
}
#canvasContainer{
  position:relative;
  /*background:url(https://i.imgur.com/Ic4rBtd.jpeg);*/
  background-image:...

JavaScript

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    canvasB = document.getElementById("canvasB"),
    tempCanvas = document.createElement("canvas"),
    tempCtx = tempCanvas.getContext("2d"),
    width = 412,
    height = 512,
    threshold = 210,
    colors = {r:255,g:0,b:0}, cycle = 0,
    points = [];

var eColorInit=["9900cc","a700b0","b50095","c2007a","d0005f","dd0044","eb0028","f9000d","ff0b04","ff1f0b","ff3412","ff4818","ff5c1f","ff7126","ff852d","ff9933","ffa72c","ffb525","ffc21e","ffd017","ffde10","ffeb0a","fff903","fbff0e","f4ff29","eeff44","e7ff60","e0ff7b","d9ff96","d2ffb1","ccffcc"];
var eColor=[];
function convertColors(){
	var aux;
  for(var i=eColorInit.length -1;i>=0;i--){
		aux=eColorInit[i];
    eColor.push(parseInt(aux.substring(0,2), 16));
    eColor.push(parseInt(aux.substring(2,4), 16));
    eColor.push(parseInt(aux.substring(4,6), 16));
  }
  console.log(eColor);
}
convertColors();
/* background canvas 
var background = new Image();
background.src = "url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFklEQVQI12OcXpVnJH+O6YM4zyteWwAlGgTp15EYpAAAAABJRU5ErkJggg==')";
background.src = "url(https://i.imgur.com/Ic4rBtd.jpeg)";
canvasB.getContext("2d").drawImage(background,0,0);
*/
var conBorde=false;
var moverse=false;
var initialized = false;

function cambiarRender(){
	conBorde=!conBorde;
}
function stop(){
	moverse=!moverse;
}

function recalcCanvasDims(parent){
  width=parent.clientWidth;
  height=parent.clientHeight;
  console.log("width",parent.clientWidth,"height",height);
}


function initPoints(){
  for(var i = 0; i < 15; i++){
      var x = Math.random()*width,
          y = Math.random()*height,
          vx = (Math.random()*8)-4,
          vy = (Math.random()*8)-4,
          val =  Math.floor(Math.random()*125); //  width:50%; height:50%;
      points.push({x:x,y:y,vx:vx,vy:vy, val:val});

  };
}


window.addEventListener('load', function(){
 ...