VIDEO CANVAS 01

<script> 
var vid = new Image();
var canvas, context;
var vw, vh;
var R, G, B, A;
var imageData, data, pixwidth;
var x, y;
var ascii; 
function init() {
  
  vid = document.getElementById('vid');
  
  canvas = document.getElementById('myCanvas');
  context = canvas.getContext('2d');
  
  vw = 590;
  vh = 590;
  
  ascii = "$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\|()1{}[]?-_+~<>i!lI;:,´^`'. "; // 69 chars
  
  alert(ascii.length);
  
  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];
  
  var GS = Math.round(0.299*R + 0.587*G + 0.114*B); // http://www.edaboard.com/thread27746.html
  
  document.getElementById('display').innerHTML = "GRAYSCALE = 0.299*R + 0.587*G + 0.114*B ";
  
  var MC = Math.round(GS/255 * (ascii.length-1));
  
  context.font = 'normal ' + pixwidth + 'px Courier';
  
  context.fillText(ascii[MC], x+pixwidth, y+pixwidth); 
  
  }
  }
}
</script> 
  
  <meta charset="UTF-8">
  </head>
<body onload="init()" >

<canvas id="myCanvas" width="600" height="600" ></canvas> 
<div id="display"></div>
<video id="vid" loop autoplay width="480" height="320" style="display: none;" > 
  <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>