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

​x
 
​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); }
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);
if (img.width > 0) myWorker.postMessage(buff);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
main thread
worker thread

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0

Browser/OS: Firefox 135 on Windows

View result in a separate tab

Test name	Executions per second
main thread	0.0 Ops/sec
worker thread	619289.3 Ops/sec

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

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:

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

Test Cases

There are two test cases:

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.
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:

CanvasRenderingContext2D: used for drawing images on the canvas.
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:

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.
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:

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.
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.

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**

**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.

Related benchmarks:

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

Comparing performance of: main thread vs worker thread

Created: 5 years ago by: Guest

Jump to the latest result

main thread

worker thread

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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