title: canvas.drawimage of autoplayed video only works when video element is visible
body: <p>I am trying to put some filters on a video by drawing it to a canvas. The problem is that when the video element is not in view it stops drawing. Ideally I would like to hide the video element all together. </p>
  
  <p>I think it only affects chrome browsers. 
  Also, It seems like if you stop and start it with the mouse the problem stops. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function drawToCanvas() {
    let vid = document.getElementById('vid1')
    let can = document.getElementById('can1')
    let ctx = can.getContext('2d')
    ctx.drawImage(vid, 0, 0, 400, 224)
    setTimeout(drawToCanvas, 30)
  }
  
  document.body.addEventListener("load", drawToCanvas(), false);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html {
    padding: 20px 0;
    background-color: #efefef;
  }
  
  body {
    width: 400px;
    padding: 40px;
    margin: 0 auto;
    background: #fff;
    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.5);
  }
  
  video {
    width: 400px;
    display: block;
  }
  
  #can1 {
    position: absolute;
    top: calc( 100vh + 100px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;canvas id='can1' height=224px width=400px&gt;&lt;/canvas&gt;
  
  
  &lt;video autobuffer controls autoplay muted=true id='vid1'&gt;
    &lt;source id="mp4" src="http://grochtdreis.de/fuer-jsfiddle/video/sintel_trailer-480.mp4" type="video/mp4"&gt;
  &lt;/video&gt;
  &lt;br&gt; Above is the Video element. 
  &lt;br&gt; Below is the Canvas
  
  &lt;br&gt;&lt;br&gt;&lt;br&gt; Why does the canvas below stop when the video is scrolled out of view
  &lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;&lt;br&gt;</code></pre>
  </div>
  </div>
  </p>