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

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 runs

drawImage Main Thread

942K/s

drawImage Worker Thread, String

811K/s

drawImage Worker Thread, ArrayBuffer

756K/s

Fastest: drawImage Main Thread (1.2x faster)

View exact numbers

✓ drawImage Main Thread: 941,663 ops/sec
• drawImage Worker Thread, String: 810,957 ops/sec
• drawImage Worker Thread, ArrayBuffer: 755,914 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 3 months ago)

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

Browser/OS: Chrome 146 on Linux

View result in a separate tab

drawImage Main Thread

942K/s

drawImage Worker Thread, String

785K/s

drawImage Worker Thread, ArrayBuffer

778K/s

View exact numbers

Test name	Executions per second
✓ drawImage Main Thread	941,663 Ops/sec
drawImage Worker Thread, String	785,319 Ops/sec
drawImage Worker Thread, ArrayBuffer	778,171 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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: 7 years ago by: Guest

Go to the latest result

drawImage Main Thread

drawImage Worker Thread, String

drawImage Worker Thread, ArrayBuffer

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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: 7 years ago by: Guest

Go to the latest result

drawImage Main Thread

drawImage Worker Thread, String

drawImage Worker Thread, ArrayBuffer

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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