OffscreenCanvas-filter-in-worker.html

<!DOCTYPE html>
<canvas id='output0' width='100' height='100'></canvas>
<canvas id='output1' width='100' height='100'></canvas>
<canvas id='output2' width='100' height='100'></canvas>
<canvas id='output3' width='100' height='100'></canvas>
<canvas id='output4' width='100' height='100'></canvas>
<canvas id='output5' width='100' height='100'></canvas>
<canvas id='output6' width='100' height='100'></canvas>
<canvas id='output7' width='100' height='100'></canvas>
<canvas id='output8' width='100' height='100'></canvas>
<canvas id='output9' width='100' height='100'></canvas>
<canvas id='output10' width='100' height='100'></canvas>
<canvas id='output11' width='100' height='100'></canvas>

<script id='myWorker' type='text/worker'>
self.onmessage = function(e) {

  var paint = function(filter) {
    var aCanvas = new OffscreenCanvas(100, 100);
    var ctx = aCanvas.getContext('2d');
    ctx.filter = filter;
    ctx.drawImage(e.data, 5, 5);
    ctx.drawImage(e.data, 35, 35);
    ctx.drawImage(e.data, 65, 65);
    return aCanvas;
  };

  var canvas = [];

  // canvas[0] = paint("blur(10px)");

  canvas[0] = paint("none");
  canvas[1] = paint("blur(10px)");
  canvas[2] = paint("brightness(40%)");
  canvas[3] = paint("contrast(20%)");
  canvas[4] = paint("drop-shadow(0 0 5px green)");
  canvas[5] = paint("grayscale(100%)");
  canvas[6] = paint("invert(100%)");
  canvas[7] = paint("opacity(50%)");
  canvas[8] = paint("saturate(20%)");
  canvas[9] = paint("sepia(100%)");
  canvas[10] = paint("sepia(1) hue-rotate(200deg)");
  canvas[11] = paint("url(#url)");

  var ret = [];
  for (var i = 0; i < canvas.length; ++i) {
    var img = canvas[i].transferToImageBitmap();
    ret.push(img);
  }

  self.postMessage(ret, ret);
};
</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 = '#A00';
patternCtx.fillRect(0, 0, 15, 15);
patternCtx.fillStyle = '#0A0';
patternCtx.fillRect(15, 0, 15, 15);
patternCtx.fillStyle = '#00A';
patternCtx.fillRect(0, 15, 15, 15);
patternCtx.fillStyle = "#AA0";
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 => {
    for (var i = 0; i < msg.data.length; ++i) {
      var outputCtx = document.getElementById('output' + i).getContext('bitmaprenderer');
      outputCtx.transferFromImageBitmap(msg.data[i]);
    }
    if (window.testRunner) {
      testRunner.notifyDone();
    }
  });
  worker.postMessage(patternImage, [patternImage]);
}
</script>
chromium/third_party/blink/web_tests/fast/canvas/OffscreenCanvas-filter-in-worker.html
