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>
</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{
  /*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"];
eColorInit =["ccffcc","d2ffb1","d9ff96","e0ff7b","e7ff60","eeff44","f4ff29","fbff0e","fff903","ffeb0a","ffde10","ffd017","ffc21e","ffb525","ffa72c","ff9933","ff852d","ff7126","ff5c1f","ff4818","ff3412","ff1f0b","ff0b04","f9000d","eb0028","dd0044","d0005f","c2007a","b50095","a700b0","9900cc"];
eColorInit=["9900cc","b50095","d0005f","eb0028","ff0b04","ff3412","ff5c1f","ff852d","ffa72c","ffc21e","ffde10","fff903","f4ff29","e7ff60","d9ff96","ccffcc"];
var eColor=[];
function convertColors(){
	var aux;
//  for(var i=0;i<eColorInit.length;i++){
  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(eColorInit.length,eColorInit[0], 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){
 ...