blur video by canvas

HTML

<video class="video" autoplay="autoplay" muted="muted" preload="auto" loop="loop">
    <source src="http://mazwai.com/system/posts/videos/000/000/123/original/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.mp4?1412890624" type="video/mp4">
    <source src="http://mazwai.com/system/posts/videos/000/000/123/webm/victor_ciurus--5d_mark_iii_magic_lantern_14_bits_raw_video.webm?1412890624" type="video/webm">
</video>
<img class='mask' src='https://i.imgur.com/mXHUGrT.png' style='display:none;'/>
<canvas class='canvas' width='1280' height='720'></canvas>

CSS

html, body {
  margin: 0 auto;
}
.video{
  width:50%;
}
.canvas {
  width: 100%;
}

.canvas {
  position: absolute;
  top: 0;
  left: 0;
}

JavaScript

// Get our mask image
var canvas = document.querySelector(".canvas");
var mask = document.querySelector(".mask");
var video = document.querySelector(".video");

var ctx = canvas.getContext('2d');
function drawMaskedVideo() {
  ctx.save();

  ctx.filter='blur(10px)';
  // Draw the video feed
  ctx.drawImage(video, 0, 0);
  // Set the composite operation, which is responsible for masking
  // see https://developer.mozilla.org/samples/canvas-tutorial/6_1_canvas_composite.html
  ctx.globalCompositeOperation = 'destination-in';

  // Apply the mask
  //ctx.drawImage(mask, 0, 0);
  ctx.filter='blur(0px)';
  ctx.drawImage(mask, 250, 200);

  ctx.restore(); 
}

requestAnimationFrame(function loop() {
  drawMaskedVideo();
  requestAnimationFrame(loop.bind(this));
});