Run results for: OffscreenCanvas vs HTMLCanvasElement drawImage() (w/ Transferable)

Test name	Executions per second
✓ drawImage Worker Thread, String	1,394,307 Ops/sec
drawImage Main Thread	1,165,616 Ops/sec
drawImage Worker Thread, ArrayBuffer StructuredClone	1,044,344 Ops/sec
drawImage Worker Thread, ArrayBuffer Transferable	109,183 Ops/sec

Script Preparation code:


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(8);
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]);

Tests:

drawImage Main Thread
if (img.width > 0){ ctx.drawImage(img, 0, 0); ctx.clearRect(0,0,640,480); }
drawImage Worker Thread, String
if (img.width > 0) myWorker.postMessage("255,0,0");
drawImage Worker Thread, ArrayBuffer StructuredClone
if (img.width > 0) myWorker.postMessage(buff);
drawImage Worker Thread, ArrayBuffer Transferable
if (img.width > 0) { let buffersFull = true; for (let i = 0; i < buffers.length; i++) { if (!buffers[i].isUsed) {myWorker.postMessage({msg:'buffer', msgIndex:i, buffer:buffers[i]},[buffers[i]]); buffers[i].isUsed = true; buffersFull = false;} }if (buffersFull) console.log("All buffers in the pool are full")}

Run results for: OffscreenCanvas vs HTMLCanvasElement drawImage() (w/ Transferable)

Comparing OffscreenCanvas vs HTMLCanvasElement, and investigating the usage of multiple postMessage strategies, from structured cloning of objects to transferable ArrayBuffers.

drawImage Main Thread

drawImage Worker Thread, String

drawImage Worker Thread, ArrayBuffer StructuredClone

drawImage Worker Thread, ArrayBuffer Transferable