Benchmark: OffscreenCanvas vs HTMLCanvasElement drawImage() (w/ Transferables)

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

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")}

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
drawImage Main Thread
drawImage Worker Thread, String
drawImage Worker Thread, ArrayBuffer StructuredClone
drawImage Worker Thread, ArrayBuffer Transferable

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

I'll break down the benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of drawing an image on two different approaches:

1. Main thread (JavaScript) using `HTMLCanvasElement`
2. Worker thread (JavaScript) using `OffscreenCanvas` and transferable arrays

**Options Compared**

There are four test cases, each testing a different approach to draw an image:

1. **drawImage Main Thread**: Tests drawing an image directly on the main thread's canvas.
2. **drawImage Worker Thread, String**: Tests sending a string representation of an image as a message to the worker thread and having it draw it.
3. **drawImage Worker Thread, ArrayBuffer StructuredClone**: Tests serializing an array buffer containing an image using `structuredClone()` and sending it to the worker thread, which then draws it.
4. **drawImage Worker Thread, ArrayBuffer Transferable**: Tests transferring an array buffer containing an image as a transferable object to the worker thread, which then draws it.

**Pros and Cons of Each Approach**

1. **Main Thread (HTMLCanvasElement)**:
	* Pros: No additional memory allocation or communication overhead.
	* Cons: Can be slow due to context switching and synchronization with the worker thread.
2. **Worker Thread (OffscreenCanvas, transferable arrays)**:
	* Pros: Can take advantage of multiple CPU cores and reduce synchronization overhead.
	* Cons: Requires additional memory allocation and communication overhead.

**Benchmark Results**

The latest benchmark results show that:

* The main thread approach is significantly slower than the worker thread approaches, especially for the "drawImage Worker Thread, String" and "drawImage Worker Thread, ArrayBuffer StructuredClone" test cases.
* The worker thread approaches with transferable arrays ("drawImage Worker Thread, ArrayBuffer Transferable") are slightly faster than those without transferable arrays.

Overall, this benchmark suggests that using a worker thread with `OffscreenCanvas` and transferable arrays can significantly improve performance for image drawing tasks.

Latest run results:

Run details: (Test run date: 5 years ago)

User agent: Mozilla/5.0 (Windows NT 6.3; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/73.0.3683.103 Safari/537.36

Browser/OS: Chrome 73 on Windows 8.1

View result in a separate tab

Test name	Executions per second
drawImage Main Thread	52419.6 Ops/sec
drawImage Worker Thread, String	122102.0 Ops/sec
drawImage Worker Thread, ArrayBuffer StructuredClone	82293.2 Ops/sec
drawImage Worker Thread, ArrayBuffer Transferable	9825.0 Ops/sec

Related benchmarks:

OffscreenCanvas vs HTMLCanvasElement drawImage() (w/ Transferables) (version: 0)

Comparing performance of: drawImage Main Thread vs drawImage Worker Thread, String vs drawImage Worker Thread, ArrayBuffer StructuredClone vs drawImage Worker Thread, ArrayBuffer Transferable

Created: 5 years ago by: Guest

Jump to the latest result

drawImage Main Thread

drawImage Worker Thread, String

drawImage Worker Thread, ArrayBuffer StructuredClone

drawImage Worker Thread, ArrayBuffer Transferable

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):