<html>
    <head>
        <style type="text/css">
        video {
            display: none;
        }
        </style>
    </head>
<body>
<video id="video" width="30" height="30">
    <source src="resources/canvas_video.webm" type="video/webm" />
</video>
<canvas id="videoOutput" width="150" height="150"></canvas>
<canvas id="imageOutput" width="150" height="150"></canvas>
<canvas id="canvasOutput" width="150" height="150"></canvas>
<canvas id="offscreenCanvas2DOutput" width="150" height="150"></canvas>
<canvas id="offscreenCanvasWebGLOutput" width="150" height="150"></canvas>

<script>
function drawImageSourceToOffscreenCanvas(imageSource, outputCanvas) {
    var aCanvas = new OffscreenCanvas(150, 150);
    var ctx = aCanvas.getContext('2d');
   
    ctx.drawImage(imageSource, 0, 0);
    ctx.drawImage(imageSource, 30, 30, 30, 30);
    // stretch the image
    ctx.drawImage(imageSource, 8, 8, 15, 15, 60, 60, 60, 60);
    // reduce the image
    ctx.drawImage(imageSource, 8, 8, 15, 15, 120, 120, 15, 15);

    var outputCanvasRenderer = outputCanvas.getContext("bitmaprenderer");
    outputCanvasRenderer.transferFromImageBitmap(aCanvas.transferToImageBitmap());
};

// image source as video
var video = document.getElementById('video');
var videoOnPlay = function() {
    video.removeEventListener("playing", videoOnPlay);
    drawImageSourceToOffscreenCanvas(video, document.getElementById('videoOutput'));
}; 
video.addEventListener("playing", videoOnPlay, true);
video.play();

// image source as image
var image = new Image(); 
var imageOnLoad = function() {
    image.removeEventListener("load", imageOnLoad);
    drawImageSourceToOffscreenCanvas(image, document.getElementById('imageOutput'));
};
image.addEventListener("load", imageOnLoad);
image.src = "resources/pattern.png";

// image source as canvas
var htmlCanvas = document.createElement('canvas');
htmlCanvas.width = 30;
htmlCanvas.height = 30;
var htmlCanvasCtx = htmlCanvas.getContext("2d");
htmlCanvasCtx.fillStyle = "blue";
htmlCanvasCtx.fillRect(0, 0, 15, 30);
htmlCanvasCtx.fillStyle = "red";
htmlCanvasCtx.fillRect(15, 0, 30, 30);
drawImageSourceToOffscreenCanvas(htmlCanvas, document.getElementById('canvasOutput'));

// image source as OffscreenCanvas with 2D context
var offscreenCanvas2D = new OffscreenCanvas(30, 30);
var offscreenCanvas2DCtx = offscreenCanvas2D.getContext("2d");
offscreenCanvas2DCtx.fillStyle = "blue";
offscreenCanvas2DCtx.fillRect(0, 0, 15, 30);
offscreenCanvas2DCtx.fillStyle = "red";
offscreenCanvas2DCtx.fillRect(15, 0, 30, 30);
drawImageSourceToOffscreenCanvas(offscreenCanvas2D, document.getElementById('offscreenCanvas2DOutput'));

// Image source as OffscreenCanvas with webGL context
var offscreenCanvasWebGL = new OffscreenCanvas(30, 30);
var gl = offscreenCanvasWebGL.getContext("webgl");
gl.clearColor(0.0, 0.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
drawImageSourceToOffscreenCanvas(offscreenCanvasWebGL, document.getElementById('offscreenCanvasWebGLOutput'));

</script>
</body>