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

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36

Browser/OS: Chrome 129 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Canvas	1979049.9 Ops/sec
Offscreen	564006.6 Ops/sec
Canvas font	3841955.8 Ops/sec
Offscreen font	29132178.0 Ops/sec
Canvas textBaseline	28356156.0 Ops/sec
Offscreen textBaseline	25517222.0 Ops/sec
Canvas textAlign	29919110.0 Ops/sec
Offscreen textAlign	29352466.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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`.

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

Fastest: N/A

Slowest: N/A

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