Benchmark: OffscreenCanvas drawImage vs HTMLCanvasElement drawImage()

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

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

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Chrome 120 on Linux

View result in a separate tab

Test name	Executions per second
drawImage Main Thread	776953.0 Ops/sec
drawImage Worker Thread, String	851892.9 Ops/sec
drawImage Worker Thread, ArrayBuffer	688990.6 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Definition**

The benchmark compares two approaches to draw an image on a canvas using JavaScript:

1. **Main Thread**: Using the `drawImage` method of the `HTMLCanvasElement`.
2. **Worker Thread**: Using the `OffscreenCanvas` API with multiple message posting strategies:
	* Sending a string representation of the image data.
	* Sending an array buffer representing the image data.

**Options Compared**

The benchmark compares three options:

1. **Main Thread, String**: Sending a string representation of the image data to the worker thread using `myWorker.postMessage("255,0,0")`.
2. **Main Thread, ArrayBuffer**: Sending an array buffer representing the image data to the worker thread using `myWorker.postMessage(buff)`.
3. **Worker Thread, String**: Sending a string representation of the image data to the worker thread using `myWorker.postMessage("255,0,0")`.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **Main Thread, String**:
	* Pros: Simple, easy to implement.
	* Cons: Limited performance, as it involves converting complex image data to a string.
2. **Main Thread, ArrayBuffer**:
	* Pros: Efficient, as it uses the native `ArrayBuffer` type for image data.
	* Cons: Requires more memory allocation and management.
3. **Worker Thread, String**:
	* Pros: Simple, easy to implement (similar to Main Thread, String).
	* Cons: Limited performance, similar to Main Thread, String.

In general, the Worker Thread approach is expected to outperform the Main Thread approaches due to its ability to offload computation and memory management to a separate thread.

**Libraries and Special Features**

This benchmark uses no external libraries. However, it does utilize some special features of JavaScript:

* **OffscreenCanvas**: A new API for creating an off-screen canvas for use in web workers.
* **Web Workers**: A feature that allows scripts to run in the background, separate from the main thread.

**Other Alternatives**

If you're interested in exploring alternative approaches or optimizations, here are a few options:

* Using WebGL instead of 2D drawing on Canvas.
* Using WebAssembly for more efficient image processing.
* Implementing custom image formats, such as WebP or JPEG XR.
* Optimizing the worker thread using techniques like pipelining or reuse.

Keep in mind that each approach has its own trade-offs and considerations, and may not be suitable for all use cases.

Related benchmarks:

OffscreenCanvas drawImage vs HTMLCanvasElement drawImage() (version: 0)

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

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

Created: 5 years ago by: Guest

Jump to the latest result

drawImage Main Thread

drawImage Worker Thread, String

drawImage Worker Thread, ArrayBuffer

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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