<html>
    <head>
        <style type="text/css">
        video {
            display: none;
        }
        </style>
    </head>
<body>
<video id="video">
    <source src="resources/canvas_video.webm" type="video/webm" />
</video>
<canvas id="videoPattern" width="100" height="100"></canvas>
<canvas id="imagePattern" width="100" height="100"></canvas>
<canvas id="canvasPattern" width="100" height="100"></canvas>
<script>
function drawPatternFromImageSourceToCanvas(offscreenCanvas, imageSource, outputCanvas, repetitionType) {
    var offscreenCanvasCtx = offscreenCanvas.getContext('2d');
    var pattern = offscreenCanvasCtx.createPattern(imageSource, repetitionType);
    offscreenCanvasCtx.fillStyle = pattern;
    offscreenCanvasCtx.fillRect(0, 0, offscreenCanvas.width, offscreenCanvas.height);
    var outputCanvasRenderer = outputCanvas.getContext("bitmaprenderer");
    outputCanvasRenderer.transferFromImageBitmap(offscreenCanvas.transferToImageBitmap());
}

function createPatternFromVideo() {
    var canvas_video = new OffscreenCanvas(100, 100);
    var video = document.getElementById('video');
    var videoOnPlay = function() {
        video.removeEventListener("playing", videoOnPlay);
        drawPatternFromImageSourceToCanvas(canvas_video, video, document.getElementById('videoPattern'), "no-repeat");
    }; 
    video.addEventListener("playing", videoOnPlay, true);
    video.play();
}

function createPatternFromImage() {
    var canvas_image = new OffscreenCanvas(100, 100);
    var image = new Image(); 
    var imageOnLoad = function() {
        image.removeEventListener("load", imageOnLoad);
        drawPatternFromImageSourceToCanvas(canvas_image, image, document.getElementById('imagePattern'), "repeat");
    };
    image.addEventListener("load", imageOnLoad);
    image.src = "resources/pattern.png";
}

function createPatternFromCanvas() {
    var canvas_canvas = new OffscreenCanvas(100, 100);
    var htmlCanvas = document.createElement('canvas');
    htmlCanvas.width = 10;
    htmlCanvas.height = 50;
    var htmlCanvasCtx = htmlCanvas.getContext("2d");
    htmlCanvasCtx.fillStyle = "blue";
    htmlCanvasCtx.fillRect(0, 0, 5, 50);
    htmlCanvasCtx.fillStyle = "red";
    htmlCanvasCtx.fillRect(5, 0, 10, 50);
    drawPatternFromImageSourceToCanvas(canvas_canvas, htmlCanvas, document.getElementById('canvasPattern'), "repeat-x");

}

createPatternFromVideo();
createPatternFromImage();
createPatternFromCanvas();
</script>
</body>
</html>