title: Take screenshot from videos and put them into Canvas and JS
body: <p>I'm trying to get all the videos from the DOM (quite a few), take a screenshot for each video and put each of them into a different canvas. <a href="https://jsfiddle.net/f21xxuw9/" rel="nofollow noreferrer">JSFiddle</a> here</p>
  
  <p>This is my attempt but it gives this error:</p>
  
  <hr>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property 'getContext' of undefined</p>
  </blockquote>
  
  <hr>
  
  <p>Any idea how I can solve the issue?</p>
  
  <pre><code>  var videoArray = [];
    var canvasArray = [];
    var c = jQuery('&lt;canvas/&gt;',{'width':373.64,'height':227.88}); //set canvas
  
    jQuery('body').append(c); //append canvas to body
  
    // push each video into an array
    jQuery('video').each(function(){
        videoArray.push(this);
    });
  
    //push each canvas into an array
    jQuery('canvas').each(function(){
          canvasArray.push(this);
  
    });
      //for each video in the array, take a snapshot of the video at position i and draw it
      for(var i = 0; i &lt; videoArray.length; i++){
          canvasArray[i].getContext("2d").drawImage(videoArray[i], 0, 0, 300,200);   
  
      }
  </code></pre>