VIDEO CANVAS 01

<script> 
var myVid, canvas, context;
var cw, ch;
var blurH, blurV;
function init() {
  
  myVid = document.getElementById('myVid');
  
  canvas = document.getElementById('myCanvas');
  context = canvas.getContext('2d');
  
  blurH = 100; // a number bigger than 0 
  blurV = 1; // a number bigger than 0
  
  cw = Math.floor(canvas.clientWidth / blurH);
  ch = Math.floor(canvas.clientHeight / blurV);
  
  canvas.width = cw;
  canvas.height = ch;
  
  return setInterval(drawVid, 10);
}
function drawVid() {
  
  if (myVid.paused || myVid.ended) { return false; }
  
  context.drawImage(myVid,0,0,cw,ch);
  
  // setTimeout(drawVid,100,myVid,canvas,cw,ch);
}
</script> 
  
  </head>
<body onload="init()" >

<canvas id="myCanvas"></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>