canvas scheduler proto

by jpeter06

HTML

<button type="button" id="bResize" onclick="resizeCanvas()">rescale</button>
<button type="button" id="bRepos" onclick="reposition()">reposition</button>
<div id="container">
  <canvas id="myCanvas" width="100" height="100" />
</div>

CSS

canvas {
    border: 0px solid #ccc;
    margin: 0px;
}
#bResize{ position:absolute; left: 10px;top:10px;}
#bRepos{ position:absolute; left: 100px;top:10px;}
#container{position:absolute; left:10px;top:40px; bottom:10px;right:10px;border:1px solid red;}

JavaScript

var elem = document.getElementById('myCanvas'),
    elemLeft = elem.offsetLeft,
    elemTop = elem.offsetTop,
    context = elem.getContext('2d'),
    elements = [],
    scaleX=1.0,scaleY=1.0;
    console.log(elemLeft,elemTop);

var datos=["0+01,11,21,31,41,51+*+*+*+?","0+00,15,30,45+*+*+*+?","0+16+07+*+*+?","0+12+07+*+*+?","0+00,15,30,45+*+*+*+?",
"0+08+*+*+*+?","0+27+07+*+*+?","0+14+07+*+*+?","0+02,12,22,32,42,52+1-4+*+*+?","0+02,12,22,32,42,52+*+*+*+?",
"0+03,08,13,18,23,28,33,38,43,48,53,58+1-4+*+*+?","0+15+07+*+*+?","0+25+*+*+*+?","0+28+01+*+*+?","0+24+*+*+*+?",
"0+08+*+*+*+?","0+14,29,44,59+1-4+*+*+?","0+14,29,44,59+*+*+*+?","0+14,29,44,59+1-4+*+*+?","0+14,29,44,59+*+*+*+?",
"0+24+01+*+*+?","0+ 14,29,44,59+0-23+*+*+?","0+10+01+*+*+?","0+10+05+*+*+?","0+40+13+*+*+?","0+40+21+*+*+?",
"0+10+01+*+*+?","0+10,45+1-23+*+*+?",
"0+55+05+*+*+?","0+14,29,44,59+*+*+*+?","0+02,17,32,47+*+*+*+?","0+21,32,52+*+*+*+?","0+10,30,50+*+*+*+?",
"0+00+01+*+*+?","0+2+03+*+*+?","0+00+04+*+*+?","0+11+07+*+*+?","0+13+07+*+*+?"];

// Add event listener for `click` events.
elem.addEventListener('click', function(event) {
console.log(event.offsetX,event.offsetY,scaleX,scaleY,event);
    var x = event.offsetX,
        y = event.offsetY;
        x=x/scaleX;
        y=y/scaleY;
    elements.forEach(function(element) {
        if (y > element.top && y < element.top + element.height && x > element.left && x < element.left + element.width) {
            alert('clicked an element: '+element.id);
        }
    });

}, false);


for(var i=1;i<12;i++){
  elements.push({ id:"item"+i,
      colour: '#eee',
      width: 0.2,
      height: 100,
      top:0,
      left:i*100/12 
  });
}

function addElement(color,top,left){
	elements.push({ id:"item",
      colour: color,
      width: 1,
      height: 0.5,
      top:top,
      left:left 
  });
}

for(var i=1;i<datos.length;i++){
	var color= 'hsl('+360*i/datos.length+', 50%, 50%)';
 var aux=datos[i].split("+");
 if(aux[2]=="*"){//cada hora
 	 var...