blob: 85ad89b54fb03f7809064a05a80394575d143be9 [file] [log] [blame]
<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>