var lastX = new Array;
var lastY = new Array;
var hue = new Array;
var canvasNum;
var lineWidth = 8;

for (canvasNum = 0; canvasNum <= 1; canvasNum++) {
//  var context = document.getElementsByTagName('canvas')[canvasNum].getContext('2d');
  document.getElementsByTagName('canvas')[canvasNum].setAttribute('width', '20');
  document.getElementsByTagName('canvas')[canvasNum].setAttribute('height', '100');
  lastX[canvasNum] = Math.random() * 20;
  lastY[canvasNum] = Math.random() * 100;
//  document.getElementsByTagName('canvas')[canvasNum].fillStyle = 'rgb(255,255,255)';
//  document.getElementsByTagName('canvas')[canvasNum].fillRect(0, 0, 
//    document.getElementsByTagName('canvas')[canvasNum].width,
//    document.getElementsByTagName('canvas')[canvasNum].height 
//  );
}

hue = 1;

function initialize() {
  for (canvasNum = 0; canvasNum <= 1; canvasNum++) {
    var context = document.getElementsByTagName('canvas')[canvasNum].getContext('2d');
    context.fillStyle = 'rgb(255,255,255)';
    context.fillRect(0, 0, context.canvas.width, context.canvas.height);
  }
}

   function line(canvasNum) {
     hue = hue + 50 * Math.random() - 25;
     for (canvasNum = 0; canvasNum <= 1; canvasNum++) {
       var context = document.getElementsByTagName('canvas')[canvasNum].getContext('2d');
       context.save();
       context.translate(context.canvas.width/2, context.canvas.height/2);
       context.scale(0.9, 0.9);
       context.translate(-context.canvas.width/2, -context.canvas.height/2);
       context.beginPath();
//       context.lineWidth = 2 + Math.random() * 4;
       context.moveTo(lastX[canvasNum], lastY[canvasNum]);
       lastX[canvasNum] = lastX[canvasNum] + Math.random() * (context.canvas.width / 10) - (context.canvas.width / 20);
       lastY[canvasNum] = lastY[canvasNum] + Math.random() * (context.canvas.height / 10) - (context.canvas.height / 20);
       if (lastX[canvasNum] > context.canvas.width) {
           lastX[canvasNum] = context.canvas.width;
       } else if (lastX[canvasNum] < 0) {
         lastX[canvasNum] = 0;
       }
       if (lastY[canvasNum] > context.canvas.height) {
         lastY[canvasNum] = context.canvas.height;
       } else if (lastY[canvasNum] < 0) {
         lastY[canvasNum] = 0;
       }
       context.lineTo( lastX[canvasNum], lastY[canvasNum]);
  
//       hue[canvasNum] = hue[canvasNum] * 10;
       context.strokeStyle = 'hsl(' + hue + ', 50%, 50%)';
       context.stroke();
       context.restore();
     }
   }

   function blank() {
     for (canvasNum = 0; canvasNum <= 1; canvasNum++) {
       var context = document.getElementsByTagName('canvas')[canvasNum].getContext('2d');
       context.fillStyle = 'rgba(0,0,0,0.01)';
       context.fillRect(0, 0, context.canvas.width, context.canvas.height);
     }
   }

initialize();
setInterval(line, 100);
setInterval(blank, 100);