title: JavaScript merge canvas and video context
body: <p>I have a Video tag and above that tag a canvas element in which I can draw. I Need to create a function which does a screenshot of the Video and the canvas.</p>
  
  <p>So far I can create a screenshot of the Video but not both together</p>
  
  <p>My Code so far:</p>
  
  <pre><code>getCameraImage () {
      let video = $("video").get(0);
      let canvas = document.createElement("canvas");
      let img = document.createElement("img");
  
      canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
      img.src = canvas.toDataURL();
  
      return img.src;
  },
  </code></pre>
  
  <p>and this is how I generate img tags with the source:</p>
  
  <pre><code>    let screenImg = this.getCameraImage();
  
      this.screenshotContainer.prepend(
              '&lt;img src="" id=\"current-video-screenshot-' + counter + '\" alt="screenshot" width="300px"/&gt;'
          );
      document.getElementById('current-video-screenshot-'+counter).setAttribute('src', screenImg);
  </code></pre>