In this article we will explore how to draw video on canvas.

Let's see how we can do this.

Step 1: Create  a html5 video element and a html5 canvas

<table>
   <tr>
      <td>
         <video id="vid" src="fish.mp4" width="640" height="360" loop></video>
      </td>
      <td>
         <canvas id="canvas1" width="640" height="360"></canvas>
      </td>
   </tr>
</table>

Step 2: Place below javascript in html page which will play the video and paint the canvas with the playing video.

<script language="javascript" type="text/javascript">

   timer1 = setInterval(drawVideo, 16);

   function drawVideo() {
      var video = document.getElementById('vid');
      if (!isNaN(video.duration)) {
         // Play the video
         video.play();
         var canvas1 = document.getElementById('canvas1');
         var context = canvas1.getContext('2d');
         context.drawImage(video, 0, 0, 400, 500);
         // Draw the video
         context.drawImage(video, 0, 0, 400, 500);
      }
   }

</script>

Now when you move mouse on the first video you will notice video controls where as when you move mouse on second video you won't see any video controls because it is canvas.

Live Demo

This ends the article of drawing video on canvas.