Benchmark: setFont measureText OffscreenCanvas vs Canvas

Script Preparation code:

var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var offscreenCanvas = new OffscreenCanvas(0, 0);
var offscreenContext = offscreenCanvas.getContext('2d');

Tests:

Canvas
context.measureText('M');
Offscreen
offscreenContext.measureText('M');
Canvas font
context.font = 'bold 48px serif';
Offscreen font
offscreenContext.font = 'bold 48px serif';
Canvas textBaseline
context.textBaseline = "hanging";
Offscreen textBaseline
offscreenContext.textBaseline = "hanging";
Canvas textAlign
context.textAlign = "center";
Offscreen textAlign
offscreenContext.textAlign = "center";

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Canvas
Offscreen
Canvas font
Offscreen font
Canvas textBaseline
Offscreen textBaseline
Canvas textAlign
Offscreen textAlign

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of JavaScript's `measureText` and `font` properties on two different types of canvases: `DOMCanvas` (the traditional canvas element) and `OffscreenCanvas` (a newer type of canvas that offloads rendering to the GPU).

**What is tested**

Here are the specific test cases:

1. **`measureText` method**: Measures the time it takes to measure the width of a single character using both `DOMCanvas` and `OffscreenCanvas`.
2. **Font properties**: Tests the performance of setting font properties (e.g., font size, style, and family) on both types of canvases.
3. **Text baseline alignment**: Compares the performance of aligning text to different baseline positions (e.g., top, hanging, and baselines) using `DOMCanvas` and `OffscreenCanvas`.
4. **Text alignment**: Tests the performance of aligning text to different positions (e.g., left, center, and right) using `DOMCanvas` and `OffscreenCanvas`.

**Options compared**

The benchmark compares the performance of two options:

1. **`DOMCanvas`**: The traditional canvas element used for rendering 2D graphics in web browsers.
2. **`OffscreenCanvas`**: A newer type of canvas that offloads rendering to the GPU, which can improve performance on certain workloads.

**Pros and cons**

Here are some pros and cons of each option:

* **`DOMCanvas`**:
	+ Pros: widely supported, easy to use, and well-established.
	+ Cons: may be slower than `OffscreenCanvas` for complex workloads due to CPU-based rendering.
* **`OffscreenCanvas`**:
	+ Pros: can improve performance on certain workloads by offloading rendering to the GPU.
	+ Cons: requires a modern browser that supports it, and its API is still evolving.

**Library used**

The benchmark uses the `OffscreenCanvas` library, which provides an implementation of the `OffscreenCanvas` API. The library allows developers to create offscreen canvases without the need for browser-specific hacks or workarounds.

**Special JS features**

The benchmark does not use any special JavaScript features that are specific to a particular browser or engine.

**Other alternatives**

If you're interested in exploring other alternatives, here are a few options:

* **WebGL**: A low-level API for rendering 3D graphics on the GPU.
* **Web Workers**: A way to run JavaScript code in parallel threads to offload computationally intensive tasks.
* **Canvas rendering engines**: Some browsers and frameworks provide custom canvas rendering engines that can offer better performance than the standard `DOMCanvas` implementation.

Note that these alternatives may require more expertise and configuration compared to using `OffscreenCanvas` or `DOMCanvas`.

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 129 on Android

View result in a separate tab

Test name	Executions per second
Canvas	436405.9 Ops/sec
Offscreen	114856.2 Ops/sec
Canvas font	1248799.4 Ops/sec
Offscreen font	6120380.0 Ops/sec
Canvas textBaseline	6494780.0 Ops/sec
Offscreen textBaseline	6617614.0 Ops/sec
Canvas textAlign	7049080.5 Ops/sec
Offscreen textAlign	6839197.5 Ops/sec

Related benchmarks:

setFont measureText OffscreenCanvas vs Canvas (version: 2)

DomCanvas vs OffscreenCanvas

Comparing performance of: Canvas vs Offscreen vs Canvas font vs Offscreen font vs Canvas textBaseline vs Offscreen textBaseline vs Canvas textAlign vs Offscreen textAlign

Created: 3 years ago by: Registered User

Jump to the latest result

Canvas

Offscreen

Canvas font

Offscreen font

Canvas textBaseline

Offscreen textBaseline

Canvas textAlign

Offscreen textAlign

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 28 days ago):