Benchmark: OffscreenCanvas001

Script Preparation code:

var img = new Image();
var imageBitmap;
var doneLoading = false;
let canvas = document.createElement('canvas');

canvas.width = 640;
canvas.height = 480;
//let canvas2 = document.createElement('canvas');
let offscreen = new OffscreenCanvas(640, 480);
//offscreen.width = 640;
//offscreen.height = 480;

var ctx = canvas.getContext('2d');
var ctx2 = offscreen.getContext('2d');

img.addEventListener('load', function() {
  Promise.all([
    createImageBitmap(img)
  ]).then(function(images) {
  imageBitmap = images[0];
  doneLoading = true;
}, false);
});

img.src = 'https://media.discordapp.net/attachments/447410261289205781/574359442913492992/unknown.png';

Tests:

Canvas
if (doneLoading) { ctx.clearRect(0,0,640,480); ctx.drawImage(imageBitmap,0,0); }
OffscreenCanvas
if (doneLoading) { ctx2.clearRect(0,0,640,480); ctx2.drawImage(imageBitmap,0,0); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Canvas
OffscreenCanvas

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

**Benchmark Explanation**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided JSON represents two benchmark definitions: `OffscreenCanvas001` and its individual test cases.

The primary goal of this benchmark is to compare the performance of rendering an image on a 2D canvas versus using an OffscreenCanvas, which is a drawing context that does not require a visible canvas element in the DOM. This allows for faster rendering without affecting the page layout or causing unnecessary DOM mutations.

**Options Compared**

Two main options are being compared:

1. **Canvas**: Rendering the image on a standard 2D canvas.
	* Pros: Wide support, ease of use, and familiar API.
	* Cons: May be slower due to additional overhead from DOM manipulation.
2. **OffscreenCanvas**: Using an OffscreenCanvas to render the image.
	* Pros: Faster rendering without affecting page layout or causing unnecessary DOM mutations.
	* Cons: Limited browser support ( currently only Chrome), may require more complex code.

**Library and Purpose**

In the benchmark preparation code, `createImageBitmap` is used to convert the loaded image into a bitmap. This function is part of the Web APIs specification and allows developers to work with images as binary data, which can be beneficial for performance-critical applications.

**Special JS Feature or Syntax**

The use of `OffscreenCanvas` is a special feature introduced in modern browsers (currently only Chrome) that provides a more efficient way to render graphics without affecting the page layout. This feature allows developers to create high-performance graphics rendering pipelines without the need for additional DOM elements.

**Other Considerations**

* **Browser Support**: OffscreenCanvas has limited browser support, making it less accessible to users with older browsers or non-Chrome browsers.
* **Additional Overhead**: Canvas may incur additional overhead due to DOM manipulation, which can affect performance in certain scenarios.

**Alternatives**

If you want to compare the performance of rendering an image on a 2D canvas versus using OffscreenCanvas but don't have access to Chrome, you could consider:

1. Using a different browser with limited support for OffscreenCanvas or alternative rendering techniques.
2. Implementing a custom rendering pipeline that mimics the behavior of OffscreenCanvas without relying on the browser's built-in feature.
3. Comparing the performance of rendering an image on multiple canvas elements versus using an OffscreenCanvas.

Keep in mind that these alternatives may not provide the same level of performance and accuracy as the original benchmark, and the results may vary depending on your specific use case and environment.

Related benchmarks:

OffscreenCanvas001 (version: 0)

OffscreenCanvas

Comparing performance of: Canvas vs OffscreenCanvas

Created: 5 years ago by: Guest

Jump to the latest result

Canvas