<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>

<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'));

</script>
</body>