How to Play or Capture video in HTML5 Canvas

1 min

In this tutorial we will draw a playing video frame as an image inside HTML5 Canvas. Canvas provides a method drawImage which draws from any source inside a Canvas.

Define the Video Block

Lets define a video block first inside your HTML code. And put a video source URL for the demo.

Define the Canvas

Now define a canvas beside the Video where the video frame would be shown.

Sorry, no canvas available

Now put up a link which would trigger the activity of drawing the image from the video.

Pause and Capture image frame from video

Draw the Video Frame

We will use JavaScript to capture and draw the video. Lets define a variable to get our defined Video tag.

var v=document.getElementById("myvideo");

Now add an eventListener of the link that we created to trigger the event.

pause_lnk.addEventListener('click', pause_and_capture, false);

Once the link is clicked, we will perform below activities in order:

a) Pause the video when link is clicked
HTML5 Video tag provides pause() event which pause the Video.

v.pause(); // Pause the video to capture

b) Get a handle to the target Canvas

var c = document.getElementById("mycanvas"); // Get the canvas
var ctx = c.getContext("2d");

c) Capture and draw the frame
Canvas provides a drawImage function which takes input the Video tag handle for the source to draw the frame from the video. You can put this piece of code inside a timer to play the Video live in the Canvas. Other two arguments are the co-ordinates in the Canvas where to draw the frame.

ctx.drawImage(v,1,1); // Draw the paused frame of the video to canvas


Now, putting this all together, I have prepared a demo to show how it works.

View Demo

Entire Code:

Download Code

<< Back to Article

Draw video on HTML5 Canvas - Demo

Play the video and click below link:

Sorry, no canvas available

<< Back to Article

View Demo Download Code


Creator and author of Connect with me via Telegram, 𝕏 (Twitter), or send us an email.
Notify of

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Inline Feedbacks
View all comments