video canvas mirror snip

video-canvas-mirror.html

<style> #mycanvas { position: absolute; margin: 0 auto; top: 0; bottom: 0; left: 0; right: 0; width: 75%; height: 75%; -webkit-filter: grayscale(1); } #video1 { position: absolute; left: 0; }</style> <script> document.addEventListener('DOMContentLoaded', function(){ var v = document.getElementById('video1'); var canvas = document.getElementById('mycanvas'); var context = canvas.getContext('2d'); var cw = 320; var ch = 240; canvas.width = cw; canvas.height = ch; v.addEventListener('play', function(){ draw(this,context,cw,ch); },false); },false); function draw(v,c,w,h) { if(v.paused || v.ended) return false; c.drawImage(v,0,0,w,h); setTimeout(draw,20,v,c,w,h); } </script> <canvas id='mycanvas'></canvas> <video id='video1' controls='controls' width='320'> <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4" /> <source src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm" /> <source src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg" /></video>