<!DOCTYPE html>
<html>
<body>
<canvas id='output' width='300' height='300'></canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
var aCanvas = new OffscreenCanvas(300, 300);
var ctx = aCanvas.getContext('2d');
ctx.shadowBlur = 5;
ctx.shadowColor = "black";
for (var i = 0; i < 6; i++) {
for (var j = 0; j < 6; j++) {
ctx.save();
ctx.fillStyle = 'rgb(' + (51 * i) + ',' + (255 - 51 * i) + ',255)';
ctx.shadowOffsetY = 2 + i;
ctx.shadowOffsetX = 2 + j;
ctx.translate(10 + j * 50, 10 + i * 50);
ctx.fillRect(0, 0, 25, 25);
ctx.restore();
}
}
var image = aCanvas.transferToImageBitmap();
self.postMessage(image, [image]);
};
</script>
<script>
if (window.testRunner) {
testRunner.waitUntilDone();
}
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("");
</script>
</body>
</html>