draw on canvas from video element js

1var canvas = document.getElementById('canvas');
2var ctx = canvas.getContext('2d');
3var video = document.getElementById('video');
4
5// set canvas size = video size when known
6video.addEventListener('loadedmetadata', function() {
7  canvas.width = video.videoWidth;
8  canvas.height = video.videoHeight;
9});
10
11video.addEventListener('play', function() {
12  var $this = this; //cache
13  (function loop() {
14    if (!$this.paused && !$this.ended) {
15      ctx.drawImage($this, 0, 0);
16      setTimeout(loop, 1000 / 30); // drawing at 30fps
17    }
18  })();
19}, 0);