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";

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 12 runs

Canvas textBaseline

15.1M/s

Offscreen font

14.7M/s

Canvas textAlign

14.5M/s

Offscreen textBaseline

13.7M/s

Offscreen textAlign

13.0M/s

Canvas font

5.4M/s

Canvas

1.8M/s

Offscreen

581K/s

Fastest: Canvas textBaseline (26.0x faster)

View exact numbers

✓ Canvas textBaseline: 15,073,316 ops/sec
• Offscreen font: 14,716,950 ops/sec
• Canvas textAlign: 14,544,556 ops/sec
• Offscreen textBaseline: 13,691,968 ops/sec
• Offscreen textAlign: 13,021,416 ops/sec
• Canvas font: 5,422,842 ops/sec
• Canvas: 1,847,004 ops/sec
• Offscreen: 580,839 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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

Canvas textAlign

29.9M/s

Offscreen textAlign

29.4M/s

Offscreen font

29.1M/s

Canvas textBaseline

28.4M/s

Offscreen textBaseline

25.5M/s

Canvas font

3.8M/s

Canvas

2.0M/s

Offscreen

564K/s

View exact numbers

Test name	Executions per second
✓ Canvas textAlign	29,919,110 Ops/sec
Offscreen textAlign	29,352,466 Ops/sec
Offscreen font	29,132,178 Ops/sec
Canvas textBaseline	28,356,156 Ops/sec
Offscreen textBaseline	25,517,222 Ops/sec
Canvas font	3,841,956 Ops/sec
Canvas	1,979,050 Ops/sec
Offscreen	564,007 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`.

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

Go to the latest result

Canvas

Offscreen

Canvas font

Offscreen font

Canvas textBaseline

Offscreen textBaseline

Canvas textAlign

Offscreen textAlign

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Go to the latest result

Canvas

Offscreen

Canvas font

Offscreen font

Canvas textBaseline

Offscreen textBaseline

Canvas textAlign

Offscreen textAlign

Historical Performance Data aggregated from 12 community runs

Desktop Results:

Chrome 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

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