blob: 299f3f1faf2e1a84c88f1b311b008589ef9bf322 [file] [log] [blame]
<!DOCTYPE html>
<html>
<body>
<canvas id='output' width='150' height='150'></canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
var aCanvas = new OffscreenCanvas(150, 150);
var ctx = aCanvas.getContext('2d');
ctx.drawImage(e.data, 0, 0);
ctx.drawImage(e.data, 30, 30, 30, 30);
// stretch the image
ctx.drawImage(e.data, 8, 8, 15, 15, 60, 60, 60, 60);
// reduce the image
ctx.drawImage(e.data, 8, 8, 15, 15, 120, 120, 15, 15);
var image = aCanvas.transferToImageBitmap();
self.postMessage(image, [image]);
};
</script>
<script>
if (window.testRunner) {
testRunner.waitUntilDone();
}
var patternCanvas = document.createElement('canvas');
patternCanvas.width = 30;
patternCanvas.height = 30;
var patternCtx = patternCanvas.getContext('2d');
patternCtx.fillStyle = '#f00';
patternCtx.fillRect(0, 0, 15, 15);
patternCtx.fillStyle = '#0f0';
patternCtx.fillRect(15, 0, 15, 15);
patternCtx.fillStyle = '#00f';
patternCtx.fillRect(0, 15, 15, 15);
patternCtx.fillStyle = "#ff0";
patternCtx.fillRect(15, 15, 15, 15);
createImageBitmap(patternCanvas).then(consumeImageBitmap);
function consumeImageBitmap(patternImage) {
var blob = new Blob([document.getElementById('myWorker').textContent]);
var worker = new Worker(URL.createObjectURL(blob));
worker.addEventListener('message', msg => {
var outputCtx = document.getElementById('output').getContext('bitmaprenderer');
outputCtx.transferFromImageBitmap(msg.data);
if (window.testRunner) {
testRunner.notifyDone();
}
});
worker.postMessage(patternImage, [patternImage]);
}
</script>
</body>