title: HTML5 How to get first frame of a video
body: <p>I am trying to get the first frame of a video in order to put it in a canvas, using this code but the canvas remains empty.</p>
  
  <pre><code>video.addEventListener("canplay",function () {
      var $this = this;
      console.log("canplay");
      console.log(video.readyState);
      canvas.getContext('2d').drawImage($this, 0, 0, canvas.width, canvas.height);
  });
  </code></pre>
  
  <p>I also use this code to mirror the video in a canvas and it works.</p>
  
  <pre><code>video.addEventListener('play', function() {
      var $this = this;
      (function loop() {
          if (!$this.paused &amp;&amp; !$this.ended) {
              context.save();
              context.scale(-1, 1);
              context.drawImage($this, 0, 0, mCanvas.width*-1, mCanvas.height);
              context.restore();
              setTimeout(loop, 1000 / 30); // drawing at 30fps
          }
      })();
  }, 0);
  </code></pre>
  
  <p>How can I get the first frame of the video? Morevoer I have the possibility to change the URL dynamically: what should I do to get the first frame of the new video?</p>