title: Playing video on HTML Canvas
body: <p>I'm trying to play a video to HTML Canvas.  Am having no issues except when I attempt to hide the video source and only display canvas.  In this case I just get a 'white screen'.  If the video element isn't hidden everything works as expected.  I don't want to display the video element and the canvas element, I only want to display the canvas element that has the video feed 'streaming' to it.  Any suggestions?  Code example attached...</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>let sourcevideo = document.getElementById("sourcevideo");
  let outputcanvas = document.getElementById("outputcanvas");
  let canvasctx = outputcanvas.getContext("2d");
  
  function initCanvas() {
    outputcanvas.width = sourcevideo.videoWidth;
    outputcanvas.height = sourcevideo.videoHeight;
    console.log(outputcanvas.width, outputcanvas.height);
    drawVideo();
  }
  
  function drawVideo() {
    canvasctx.drawImage(
      sourcevideo,
      0,
      0,
      outputcanvas.width,
      outputcanvas.height
    );
    requestAnimationFrame(drawVideo);
  }
  
  sourcevideo.addEventListener("loadeddata", initCanvas);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="UTF-8" /&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;
    &lt;title&gt;Document&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div id="videocontainer"&gt;
      &lt;video id="sourcevideo" controls src="https://upload.wikimedia.org/wikipedia/commons/transcoded/c/c4/Physicsworks.ogv/Physicsworks.ogv.240p.vp9.webm"&gt;&lt;/video&gt;
    &lt;/div&gt;
    &lt;canvas id="outputcanvas"&gt;&lt;/canvas&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>