VIDEO CANVAS - SQUARES




<script> 
var myVid, canvas, context;
var cw, ch;
var blurH, blurV;
var sourceWidth, sourceHeight;
function init() {
  
  myVid = document.getElementById('myVid');
  
  sourceWidth = 480;
  sourceHeight = 320;
  
  canvas = document.getElementById('myCanvas');
  context = canvas.getContext('2d');
  
  return setInterval(drawVid, 10);
}
function drawVid() {
  
  if (myVid.paused || myVid.ended) { return false; }
  
  context.drawImage(myVid, 0, 0, sourceWidth/2, sourceHeight/2);
  
  var imageData = context.getImageData(0, 0, sourceWidth, sourceHeight);
  
  var data = imageData.data;
  
  var pixwidth = 5;
for (var y = 0; y < sourceHeight/2; y+=pixwidth) {   // ROWS 
 for (var x = 0; x < sourceWidth/2; x+=pixwidth) {   // COLUMNS
  
  var R = data[((sourceWidth * y) + x) * 4];
  var G = data[((sourceWidth * y) + x) * 4 + 1];
  var B = data[((sourceWidth * y) + x) * 4 + 2];
  
  context.beginPath();
  context.arc(x, y, pixwidth/2, 0, Math.PI*2, true);
  //context.rect(x+sourceWidth/2, y+sourceHeight/2, pixwidth, pixwidth);
  context.fillStyle = 'rgb('+(255-R)+','+(G)+','+(255-B)+')';
  context.fill();
  context.lineWidth = 1;
  context.strokeStyle = 'black';
  context.stroke();
  
  }
  }
}
</script> 
  
  </head>
<body onload="init()" >

<canvas id="myCanvas" width="500" height="500"></canvas> 
<video id="myVid" loop autoplay width="0" height="0"> 
  <source src="vid/movie.webm" type="video/webm"> 
  <source src="vid/movie.ogv" type="video/ogg"> 
  <source src="vid/movie.mp4" type="video/mp4">  
  </video>