Article Categories

Selected Reading

Display video inside HTML5 canvas

Javascript Web Development Front End Scripts

You can display video inside an HTML5 canvas by using the drawImage() method to render video frames onto the canvas. This technique is useful for applying real-time effects, overlays, or custom controls to video content.

Basic Setup

First, create the HTML structure with both video and canvas elements:

<!DOCTYPE html>
<html>
<head>
    <title>Video in Canvas</title>
</head>
<body>
    <video id="video" width="400" height="300" controls>
        <source src="/html5/mov_bbb.mp4" type="video/mp4">
        Your browser does not support the video tag.
    </video>
    
    <canvas id="canvas" width="400" height="300"></canvas>
    
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');
        
        video.addEventListener('play', function() {
            var $this = this;
            (function loop() {
                if (!$this.paused && !$this.ended) {
                    context.drawImage($this, 0, 0);
                    setTimeout(loop, 1000 / 30); // 30 FPS
                }
            })();
        }, false);
    </script>
</body>
</html>

How It Works

The code works by:

Event Listener: Waits for the video's 'play' event to start rendering
Loop Function: Continuously draws video frames to canvas while video is playing
Frame Rate: Uses setTimeout with 1000/30 milliseconds for 30 FPS
Conditions: Checks if video is not paused or ended before drawing each frame

Enhanced Version with Controls

<!DOCTYPE html>
<html>
<head>
    <title>Enhanced Video Canvas</title>
</head>
<body>
    <video id="video" width="400" height="300" style="display:none;">
        <source src="/html5/mov_bbb.mp4" type="video/mp4">
    </video>
    
    <canvas id="canvas" width="400" height="300" style="border: 1px solid #000;"></canvas>
    <br>
    <button onclick="playVideo()">Play</button>
    <button onclick="pauseVideo()">Pause</button>
    
    <script>
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        var video = document.getElementById('video');
        
        function drawVideo() {
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
            if (!video.paused && !video.ended) {
                requestAnimationFrame(drawVideo);
            }
        }
        
        function playVideo() {
            video.play();
            drawVideo();
        }
        
        function pauseVideo() {
            video.pause();
        }
        
        video.addEventListener('loadeddata', function() {
            // Draw first frame when video loads
            context.drawImage(video, 0, 0, canvas.width, canvas.height);
        });
    </script>
</body>
</html>

Key Points

Performance: Use requestAnimationFrame() instead of setTimeout() for smoother animation
Scaling: Specify canvas dimensions in drawImage() to scale video
Hidden Video: Set video element to display:none to show only canvas
Error Handling: Always check video state before drawing frames

Common Use Cases

Adding real-time filters or effects to video
Creating custom video player interfaces
Extracting frames for image processing
Overlaying graphics or text on video content

Conclusion

Drawing video to canvas enables powerful video manipulation capabilities in the browser. Use requestAnimationFrame() for better performance and always handle video state changes properly.

Rishi Rathor

Updated on: 2026-03-15T23:18:59+05:30

564 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next