OffscreenCanvas-2d-drawImage-expected.html

<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 drawImageSourceToHTMLCanvas(imageSource, outputCanvas) { 
    var ctx = outputCanvas.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);
};

// image source as video
var video = document.getElementById('video');
var videoOnPlay = function() {
    video.removeEventListener("playing", videoOnPlay);
    drawImageSourceToHTMLCanvas(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);
    drawImageSourceToHTMLCanvas(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);
drawImageSourceToHTMLCanvas(htmlCanvas, document.getElementById('canvasOutput'));

// Assume html and offscreen canvases should yield identical results
drawImageSourceToHTMLCanvas(htmlCanvas, document.getElementById('offscreenCanvas2DOutput'));

// Image source as OffscreenCanvas with webGL context
var glCanvas = document.createElement('canvas');
glCanvas.width = glCanvas.height = 30;
var gl = glCanvas.getContext("webgl");
gl.clearColor(0.0, 0.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
drawImageSourceToHTMLCanvas(glCanvas, document.getElementById('offscreenCanvasWebGLOutput'));

</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/OffscreenCanvas-2d-drawImage-expected.html
