Run results for: OffscreenCanvas drawImage vs HTMLCanvasElement drawImage()

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser: Chrome 111

Operating system: Linux

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
drawImage Main Thread	507745.1 Ops/sec
drawImage Worker Thread, String	810433.5 Ops/sec
drawImage Worker Thread, ArrayBuffer	638610.2 Ops/sec

Script Preparation code:


var blob = new Blob([
    `  
  let bitmap = undefined;
  let canvas = undefined;
  let ctx    = undefined;

let postAMessage=self.postMessage;


self.onmessage = function(ev) {



  if(ev.data.msg === 'bitmap' && canvas != undefined) {
		bitmap = ev.data.imageB;

	console.log("Received an ImageBitmap next!");
    while (true)
	{
		ctx.clearRect(0,0,640,480);
		ctx.drawImage(bitmap, 0,0);
	}
  }

  if(ev.data.msg === 'init' && bitmap != undefined) {
    canvas = ev.data.canvas;
    ctx = canvas.getContext('2d');
	console.log("Received a canvas next!");
	
    while (true)
	{
		ctx.clearRect(0,0,640,480);
		ctx.drawImage(bitmap, 0,0);
	}
  }

  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');

  }

}
`]);

var myWorker = new Worker(window.URL.createObjectURL(blob));
var buff = new ArrayBuffer(8);


var img = new Image();

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
if (img.width > 0) myWorker.postMessage(buff);

Run results for: OffscreenCanvas drawImage vs HTMLCanvasElement drawImage()

Comparing Worker's OffscreenCanvas.drawImage with Main Thread's Canvas's drawImage and some message posting strategies

drawImage Main Thread

drawImage Worker Thread, String

drawImage Worker Thread, ArrayBuffer