title: Capture Frame from Video.js with Canvas
body: <p>I'm attempting to fade out a Video.js video by capturing the current frame with canvas, create an image, doing all the player changes etc under the image and then fade out the image. </p>
  
  <p>I can't seem to access the video via Canvas, I get</p>
  
  <pre><code>Uncaught TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': No function was found that matched the signature provided. 
  </code></pre>
  
  <p>Here's the code</p>
  
  <pre><code>    var video = document.getElementById('video');
      var canvas = document.createElement('canvas');
      var context = canvas.getContext('2d');
          context.drawImage(video, 0, 0, video.width, video.height);
       var dataURL = thecanvas.toDataURL();
  
          //create img
          var img = document.createElement('img');
          img.setAttribute('src', dataURL);
  
          //append img in container div
          document.getElementById('body').appendChild(img);
  </code></pre>
  
  <p>Video is created thus:</p>
  
  <pre><code>             &lt;video id='video' class='video-js' preload controls&gt;
               &lt;source src='http://example.com/video.mp4"' type='video/x-m4v' /&gt;
               &lt;/video&gt;
  </code></pre>
  
  <p>Video is all running fine etc. </p>
  
  <p>To dispose of the video I use</p>
  
  <pre><code>    var player = videojs('video');  
      player.dispose();
  </code></pre>
  
  <p>And assume this would be a better selector, however chucking 'player' into the <code>context.drawImage</code> after it's been declared doesn't help either. </p>