Benchmark: drawImage and getImageData on Canvas vs OffscreenCanvas

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:

main thread
if (img.width > 0){ ctx.drawImage(img, 0, 0); var imageData = ctx.getImageData(0, 0, img.width, img.height); }
worker thread
if (img.width > 0) myWorker.postMessage(buff);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
main thread
worker thread

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 13 days ago)

User agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser/OS: Firefox 115 on Windows 7

View result in a separate tab

Test name	Executions per second
main thread	0.0 Ops/sec
worker thread	308542.5 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 provided JSON to understand what is being tested and compare different approaches.

**Benchmark Overview**

The benchmark compares the performance of two approaches:

1. Drawing an image on the main thread using `ctx.drawImage` and then retrieving the image data with `getImageData`.
2. Sending the image data from a worker thread to the main thread using Web Workers API.

**Test Cases**

There are two test cases:

1. **main thread**: This test case checks the performance of drawing an image on the main thread and then retrieving the image data.
	* The script prepares a canvas element, creates an image, and sends it to the worker thread using `postMessage`.
	* The worker thread receives the image, clears the canvas, draws the image, and then sends the image data back to the main thread using `postMessage` with the `imageData` buffer.
2. **worker thread**: This test case checks the performance of sending the image data from a worker thread to the main thread.
	* The script prepares a blob containing a canvas element, creates an image, and sends it to the worker thread using `postMessage`.
	* The worker thread receives the image, clears the canvas, draws the image, and then sends the `imageData` buffer back to the main thread using `postMessage`.

**Library Used**

The script uses the following libraries:

1. `CanvasRenderingContext2D`: used for drawing images on the canvas.
2. `Web Workers API`: used for sending data between threads.

**Special JS Features or Syntax**

This benchmark does not use any special JavaScript features or syntax that are specific to a particular browser or version. It focuses on the performance comparison of different approaches using standard Web APIs.

**Pros and Cons of Different Approaches**

Here's a brief summary of the pros and cons of each approach:

1. **Main Thread Approach**:
	* Pros: easier to understand, more control over the execution flow.
	* Cons: blocking, can lead to performance bottlenecks due to DOM updates and garbage collection.
2. **Worker Thread Approach**:
	* Pros: non-blocking, can offload computationally expensive tasks, reduces DOM updates and garbage collection overhead.
	* Cons: requires more complex setup, introduces additional overhead for thread synchronization.

**Other Alternatives**

There are other approaches to compare the performance of drawing images on a canvas:

1. **OffscreenCanvas**: Instead of using `transferControlToOffscreen` to create an offscreen canvas, you could use the new `OffscreenCanvas` API, which provides a more efficient and streamlined way to work with offscreen canvases.
2. **Web Workers API with shared arrays**: Instead of sending image data between threads using `postMessage`, you could use shared arrays to store the image data in a thread-safe manner.

However, these alternatives are not part of this specific benchmark and would require additional modifications to the script.

In summary, this benchmark compares the performance of two approaches: drawing an image on the main thread and then retrieving the image data, versus sending the image data from a worker thread to the main thread. The results highlight the benefits of using non-blocking approaches, such as Web Workers API, for computationally expensive tasks.

Related benchmarks:

drawImage and getImageData on Canvas vs OffscreenCanvas (version: 0)

Comparing performance of: main thread vs worker thread

Created: 6 years ago by: Guest

Jump to the latest result

main thread

worker thread

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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