title: HTML5 drawimage from video to canvas
body: <p>I was trying to capture a frame from video and drawing it in canvas using HTML5, but the below code is not working. when i click on the start button the canvas is filled with black color</p>
  
  <pre><code>    &lt;video src="video2.mp4" autoplay="true" type="video/mp4" width="300" height="200" id="vid"&gt;
          &lt;/video&gt;
          &lt;canvas id="cvs"&gt; &lt;/canvas&gt;
          &lt;button onclick="start()"&gt;Start&lt;/button&gt;
          &lt;script&gt;
          var video=document.getElementById("vid");
          var cvs=document.getElementById("cvs");
          function start(){
          cvs.getContext("2d").drawImage(video, 0, 0, 300,200);
          }
  &lt;/script&gt;
  </code></pre>