Benchmark: drawImage and getImageData on Canvas vs OffscreenCanvas 2

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.crossOrigin = 'Anonymous';
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.crossOrigin = 'Anonymous';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 year ago)

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_6_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.6 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 16 on iOS 16.6.1

View result in a separate tab

Test name	Executions per second
Main Thread	9284084.0 Ops/sec
Worker Thread	9628388.0 Ops/sec

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

Let's break down the benchmark and its test cases.

Benchmark Overview

The benchmark compares the performance of two approaches: drawing an image on the main thread (using Canvas) and sending an image to a worker thread for processing, which then draws the same image using OffscreenCanvas. The goal is to determine whether using a separate thread improves performance in this specific use case.

Test Cases

There are two test cases:

Main Thread: This test case measures the execution time of drawing an image on the main thread using Canvas. It creates an image, clears the canvas, draws the image, and gets the image data.
Worker Thread: This test case measures the execution time of sending an image to a worker thread for processing, which then draws the same image using OffscreenCanvas. The image is created, sent to the worker thread, and then processed by the worker thread.

Options Compared

The benchmark compares two options:

Main Thread: Drawing an image on the main thread using Canvas.
Worker Thread: Sending an image to a worker thread for processing, which then draws the same image using OffscreenCanvas.

Pros and Cons of Each Approach

Main Thread:

Pros:

Easier to understand and implement
No need for additional infrastructure (worker threads)
Can be optimized for specific use cases

Cons:

May lead to performance bottlenecks due to blockage of the main thread
Requires more resources (memory, CPU) compared to offloading work to a worker thread

Worker Thread:

Pros:

Allows for better utilization of system resources and CPU
Can improve performance by offloading computationally expensive tasks to a separate thread
Reduces blocking of the main thread, allowing it to continue executing other tasks

Cons:

Requires additional infrastructure (worker threads) and management
May introduce overhead due to communication between the main thread and worker thread
Can be more complex to understand and implement compared to the main thread approach

Other Considerations

The benchmark uses OffscreenCanvas, which is a relatively new feature introduced in Chrome 83. Its performance characteristics are still being optimized.
The benchmark assumes that the image processing task on the worker thread can be parallelized, which may not always be the case.

Alternatives

If you're looking for alternatives to this benchmark or want to explore other approaches, here are some options:

Native Web Workers: Instead of using OffscreenCanvas, you could use native web workers (Web Workers API) to process images in a separate thread.
Canvas-to-ImageConverter: You could use libraries like Canvas-to-Image-Converter or imagejs to convert Canvas images to other formats (e.g., PNG, JPEG), which may have different performance characteristics.
GPU-based Image Processing: If you're working with high-performance graphics applications, you might consider using GPU-based image processing techniques, such as WebGL, to offload computationally expensive tasks.

Keep in mind that the choice of approach depends on your specific use case and requirements.

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its test cases.

**Benchmark Overview**

**Test Cases**

There are two test cases:

1. **Main Thread**: This test case measures the execution time of drawing an image on the main thread using Canvas. It creates an image, clears the canvas, draws the image, and gets the image data.
2. **Worker Thread**: This test case measures the execution time of sending an image to a worker thread for processing, which then draws the same image using OffscreenCanvas. The image is created, sent to the worker thread, and then processed by the worker thread.

**Options Compared**

The benchmark compares two options:

1. **Main Thread**: Drawing an image on the main thread using Canvas.
2. **Worker Thread**: Sending an image to a worker thread for processing, which then draws the same image using OffscreenCanvas.

**Pros and Cons of Each Approach**

**Main Thread:**

Pros:

* Easier to understand and implement
* No need for additional infrastructure (worker threads)
* Can be optimized for specific use cases

Cons:

* May lead to performance bottlenecks due to blockage of the main thread
* Requires more resources (memory, CPU) compared to offloading work to a worker thread

**Worker Thread:**

Pros:

* Allows for better utilization of system resources and CPU
* Can improve performance by offloading computationally expensive tasks to a separate thread
* Reduces blocking of the main thread, allowing it to continue executing other tasks

Cons:

* Requires additional infrastructure (worker threads) and management
* May introduce overhead due to communication between the main thread and worker thread
* Can be more complex to understand and implement compared to the main thread approach

**Other Considerations**

* The benchmark uses OffscreenCanvas, which is a relatively new feature introduced in Chrome 83. Its performance characteristics are still being optimized.
* The benchmark assumes that the image processing task on the worker thread can be parallelized, which may not always be the case.

**Alternatives**

If you're looking for alternatives to this benchmark or want to explore other approaches, here are some options:

1. **Native Web Workers**: Instead of using OffscreenCanvas, you could use native web workers (Web Workers API) to process images in a separate thread.
2. **Canvas-to-ImageConverter**: You could use libraries like Canvas-to-Image-Converter or imagejs to convert Canvas images to other formats (e.g., PNG, JPEG), which may have different performance characteristics.
3. **GPU-based Image Processing**: If you're working with high-performance graphics applications, you might consider using GPU-based image processing techniques, such as WebGL, to offload computationally expensive tasks.

Keep in mind that the choice of approach depends on your specific use case and requirements.

Related benchmarks:

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

Comparing performance of: Main Thread vs Worker Thread

Created: 3 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):