OffscreenCanvas-2d-pattern-in-worker.html

<!DOCTYPE html>
<html>
<body>
<canvas id='output' width='150' height='150'></canvas>
<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {
    var patternCanvas = new OffscreenCanvas(30, 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);

    var aCanvas = new OffscreenCanvas(150, 150);
    var ctx = aCanvas.getContext('2d');
   
    var myPattern = ctx.createPattern(patternCanvas, 'repeat');
    ctx.fillStyle = myPattern;
    ctx.fillRect(0, 0, aCanvas.width, aCanvas.height);

    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("go");
</script>
</body>
chromium/third_party/blink/web_tests/fast/canvas/OffscreenCanvas-2d-pattern-in-worker.html
