Benchmark: OffscreenCanvas - MeasureThat.net

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 = canvas2.transferControlToOffscreen();
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:

Run details: (Test run date: 5 months ago)

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

Browser/OS: Mobile Safari 26 on iOS 18.7

View result in a separate tab

Test name	Executions per second
Canvas	848903232.0 Ops/sec
OffscreenCanvas	797618240.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll provide an explanation of the benchmark, its options, pros and cons, and other considerations.

**Benchmark Overview**

The benchmark measures the performance of two approaches to render images on a 480x640 pixel canvas: `Canvas` and `OffscreenCanvas`. The goal is to clear the canvas, draw the image, and then display it.

**Options Compared**

There are two options being compared:

1. **Canvas**: Renders the image directly onto the main rendering context (`ctx`) of the canvas element.
2. **OffscreenCanvas**: Creates a separate offscreen canvas element (`offscreen`), transfers control to it, and renders the image on that offscreen canvas using its own rendering context (`ctx2`). The resulting offscreen canvas is then transferred back to the original canvas element.

**Pros and Cons of Each Approach**

1. **Canvas**
	* Pros:
		+ Simpler implementation.
		+ No need for an additional canvas element.
	* Cons:
		+ May incur higher overhead due to rendering on the main context, which can lead to slower performance.
2. **OffscreenCanvas**
	* Pros:
		+ Can potentially reduce rendering overhead by using a separate offscreen context.
		+ Allows for more control over rendering settings and optimization.
	* Cons:
		+ Requires an additional canvas element, which adds complexity to the implementation.

**Other Considerations**

1. **Library Usage**: The benchmark uses the `createImageBitmap` function from the Web APIs, which is a standardized API for working with image bitmaps in web applications. This library provides a convenient way to manipulate images and is widely supported across browsers.
2. **Special JS Feature or Syntax**: There is no special JavaScript feature or syntax used in this benchmark.

**Alternatives**

If you're interested in exploring alternative approaches, here are some options:

1. **WebGL**: WebGL is a low-level API for rendering 3D graphics on the web. It provides more control over rendering settings and can be optimized for specific use cases.
2. **Canvas with WebGL**: You could also consider using WebGL with canvas to render images. This approach would require setting up a WebGL context within the canvas element, but it offers more flexibility in terms of rendering customization.

Keep in mind that these alternatives may introduce additional complexity or dependencies compared to the original Canvas and OffscreenCanvas approaches.

Related benchmarks:

OffscreenCanvas (version: 0)

OffscreenCanvas

Comparing performance of: Canvas vs OffscreenCanvas

Created: 6 years ago by: Guest

Jump to the latest result

Canvas

OffscreenCanvas

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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