<!DOCTYPE html>
<html>
<body>
<canvas id='output' width='200' height='200'></canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) { 
    var aCanvas = new OffscreenCanvas(200, 200);
    var ctx = aCanvas.getContext('2d');

    var radialGrad = ctx.createRadialGradient(100, 100, 100, 100, 100, 0);
    radialGrad.addColorStop(0, "#fff");
    radialGrad.addColorStop(1, "#0f0");

    ctx.fillStyle = radialGrad;
    ctx.fillRect(0, 0, 200, 200);
  
    var linearGrad = ctx.createLinearGradient(0, 0, 200, 200);
    linearGrad.addColorStop(0, "#f00");
    linearGrad.addColorStop(1, "#ff0");

    ctx.strokeStyle = linearGrad;
    ctx.lineWidth = "3";
    ctx.beginPath();
    ctx.moveTo(0, 0);
    ctx.lineTo(200, 200);
    ctx.stroke();

    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>