​

var blob = new Blob([

`

  let bitmap = undefined;

  let canvas = undefined;

  let ctx    = undefined;

  let buffer = undefined;

​

let postAMessage=self.postMessage;

​

function render()

{

        ctx.clearRect(0,0,640,480);

        ctx.drawImage(bitmap, 0,0);

        requestAnimationFrame(render);

}

​

self.onmessage = function(ev) {

​

​

​

  if(ev.data.msg === 'bitmap' && canvas != undefined) {

        bitmap = ev.data.imageB;

        console.log("Received an ImageBitmap next!");

        render();

  }

​

  if(ev.data.msg === 'init' && bitmap != undefined) {

    canvas = ev.data.canvas;

    ctx = canvas.getContext('2d');

    console.log("Received a canvas next!");

    render();

​

  }

​

  if(ev.data.msg === 'bitmap' && canvas == undefined) {

    console.log("Received a bitmap first!");

        bitmap = ev.data.imageB;

  }

​

  if(ev.data.msg === 'init' && bitmap == undefined) {

    console.log("Received a canvas first!");

    canvas = ev.data.canvas;

    ctx = canvas.getContext('2d');

​

  }

  if(ev.data.msg === 'buffer') {

    console.log("Clearing buffer " + ev.data.msgIndex + "from pool");

​

    self.postMessage({msg:'buffer',msgIndex:ev.data.msgIndex});

  }

}

`]);

​

var myWorker = new Worker(window.URL.createObjectURL(blob));

var buff = new ArrayBuffer(100);

var buffers = [];

​

//create a pool of buffers

for (let i = 0; i < 30; i++)

{

buffers.push(new ArrayBuffer(100));

buffers[i].isUsed = false;

}

​

var img = new Image();

​

function handleMessageFromWorker(msg) {

    console.log('the thread used buffer: ' + msg.data.msgIndex);

    if (msg.data.msg == "buffer")

    {

      buffers[parseInt(msg.data.msgIndex)] = new ArrayBuffer(100);

      buffers[parseInt(msg.data.msgIndex)].isUsed = false;

    }

}

​

myWorker.addEventListener('message', handleMessageFromWorker);

​

img.src = "https://www.google.com/s2/favicons?domain=www.google.com";

​

img.decode().then(() => {createImageBitmap(img).then(Ibitmap => { myWorker.postMessage({imageB: Ibitmap, msg:'bitmap'}, [Ibitmap]);  })});

​

var canvas =  document.createElement("canvas");

var c2 =  document.createElement("canvas");

c2.width = 640;

c2.height = 480;

c2 = c2.transferControlToOffscreen();

​

canvas.width = 640;

canvas.height = 480;

c2.width = 640;

c2.height = 480;

​

var ctx = canvas.getContext('2d');

​

myWorker.postMessage({msg: 'init', canvas: c2}, [c2]);

​

​

​