christianselig/canvas-draw.html

## canvas-draw.html
<html>
    <head>
        <style>
            * {
                margin: 0;
                padding: 0;
            }

            video {
                width: 1920px;
            }

            canvas {
                position: fixed;
            }
        </style>
    </head>
    <body>
        <video src="https://christianselig.com/bunny.mp4" controls autoplay loop muted></video>

        <script>
            let canvas = undefined;
            let ctx = undefined;

            setInterval(function() {
                const video = document.querySelector('video');

                if (!canvas) {
                    canvas = document.createElement('canvas');
                    document.body.prepend(canvas);
                    ctx = canvas.getContext('2d');
                    canvas.style.width = 1920;
                    canvas.style.height = 1080;
                }

                canvas.width = video.videoWidth;
                canvas.height = video.videoHeight;
                ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
            }, 40);
        </script>
    </body>
</html>
	<html>
	<head>
	<style>
	* {
	margin: 0;
	padding: 0;
	}

	video {
	width: 1920px;
	}

	canvas {
	position: fixed;
	}
	</style>
	</head>
	<body>
	<video src="https://christianselig.com/bunny.mp4" controls autoplay loop muted></video>

	<script>
	let canvas = undefined;
	let ctx = undefined;

	setInterval(function() {
	const video = document.querySelector('video');

	if (!canvas) {
	canvas = document.createElement('canvas');
	document.body.prepend(canvas);
	ctx = canvas.getContext('2d');
	canvas.style.width = 1920;
	canvas.style.height = 1080;
	}

	canvas.width = video.videoWidth;
	canvas.height = video.videoHeight;
	ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
	}, 40);
	</script>
	</body>
	</html>