<script> 
var vid = new Image();
var canvas, context;
var vw, vh;
var R, G, B, A;
var imageData, data, pixwidth;
var x, y;
function init() {
  
  vid = document.getElementById('vid');
  
  canvas = document.getElementById('myCanvas');
  context = canvas.getContext('2d');
  
  vw = 600;
  vh = 600;
  
  return setInterval(drawVid, 20); 
  
  }
function drawVid() {
  
  context.drawImage(vid,0,0,vw,vh);
  
  imageData = context.getImageData(0, 0, vw, vh); // FIREFOX... ARGH!!!
  
  data = imageData.data;
  
  pixwidth = 10;
  
  context.clearRect(0,0,canvas.width, canvas.height);
for (y = 0; y < vh; y+=pixwidth) {   // ROWS 
 for (x = 0; x < vw; x+=pixwidth) {   // COLUMNS
  
  R = data[((vw * y) + x) * 4];
  G = data[((vw * y) + x) * 4 + 1];
  B = data[((vw * y) + x) * 4 + 2];
  A = data[((vw * y) + x) * 4 + 3];
  
  context.beginPath();
  
  context.arc(x+pixwidth, y+pixwidth, pixwidth/2, 0, Math.PI*2, true);
  //context.rect(x, y, pixwidth, pixwidth);
  context.fillStyle = 'rgba('+(R)+','+(G)+','+(B)+','+(A)+')';
  context.fill();
  context.lineWidth = 1;
  context.strokeStyle = 'black';
  context.stroke();
  context.closePath(); 
  }
  }
}
</script>