DYNAMIC LAYERS



<style type="text/css">
canvas { position:absolute; border:#0F0 thin dotted; top: 60px; left: 40px; width: 400px; height: 400px; }
</style>

<script>
// DECLARE requestAnimFrame 
window.requestAnimFrame = ( function(){
  
  return  window.requestAnimationFrame       || 
  window.webkitRequestAnimationFrame || 
  window.mozRequestAnimationFrame    || 
  window.oRequestAnimationFrame      || 
  window.msRequestAnimationFrame     || 
  function( callback ){
  window.setTimeout(callback, 1000 / 60);
  };
  
  })();

// DEFINE YOUR GLOBAL VARIABLES HERE
  
  var canvas, canvas0;
  var context0;
  
  var context = new Array();
  
  var counter, inc;
  
  var layers;
  
  var cw = 400;
  var ch = 400;
  
// INITIALIZE THE STARTING FUNCTION

function setup() {
  
  counter = 0;
  
  inc = 1;
  
  draw(); // THIS IS WHERE AL HAPPENS
  
  document.addEventListener("click", addCanvas, false);
  
  }
  
function addCanvas() {
  
  var newLayer = document.createElement('canvas');
  
  document.body.appendChild(newLayer);
  
  var layers = document.getElementsByTagName('canvas').length;
  
  var canvasId = "canvas" + (layers-1);
  
  newLayer.id = canvasId;
  newLayer.width = cw;
  newLayer.height = ch;
  
}
  
  
function draw() { 

if (counter > Math.PI*2 || counter < 0) { inc *= -1; }

counter += 0.1*inc;

for (var i=0; i<document.getElementsByTagName('canvas').length; i++ ) { 

 // FOR TESTING PURPOSES
  canvas = document.getElementsByTagName('canvas').item(i).id;
  document.getElementById('display').innerHTML = canvas;
//////////////////
  
  context[i] = document.getElementsByTagName('canvas').item(i).getContext('2d');
  context[i].clearRect(0, 0, cw, ch);
  context[i].save();
  context[i].translate(cw/2, ch/2);
  context[i].rotate(counter+i);
  var R = Math.round(counter*20+i*10);
  var G = 100 + Math.round(155 -  i*10);
  var B = 100 + Math.round(counter*20);
  context[i].fillStyle = "rgba("+R+","+G+","+B+", 0.1)";
  context[i].fill();
  context[i].fillRect(-50-20*counter/2,-50-20*counter/2,100+20*counter-i*2,100+20*counter);
  context[i].restore();
}
requestAnimFrame(draw); 
}
  
</script>

<body onload="setup()">

<canvas id="canvas0" width="400" height="400"></canvas>