Benchmark: OffsetScreenCanvas.measureText VS. Canvas.measureText

Script Preparation code:

const font = '12px sans-serif';
const testTexts = window.testTexts = '国口永水〇0o123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ'.split('');

window.measureText = (() => {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  return (txt) => ctx.measureText(txt);
})();

window.oscMeasureText = (() => {
  const canvas = new window.OffscreenCanvas(0, 0);
  const ctx = canvas.getContext('2d');
  ctx.font = font;
  return (txt) => ctx.measureText(txt);
})();

Tests:

measureText via Canvas
testTexts.map(txt => measureText(txt))
measureText via OffsetScreenCanvas
testTexts.map(txt => oscMeasureText(txt))

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 runs

measureText via Canvas

91K/s

measureText via OffsetScreenCanvas

57K/s

Fastest: measureText via Canvas (1.6x faster)

View exact numbers

✓ measureText via Canvas: 91,232 ops/sec
• measureText via OffsetScreenCanvas: 56,720 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
measureText via Canvas
measureText via OffsetScreenCanvas

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Safari/537.36 Edg/149.0.0.0

Browser/OS: Chrome 149 on Windows

View result in a separate tab

measureText via OffsetScreenCanvas

51K/s

measureText via Canvas

50K/s

View exact numbers

Test name	Executions per second
✓ measureText via OffsetScreenCanvas	51,340 Ops/sec
measureText via Canvas	49,629 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript benchmark that compares two approaches for measuring text on a canvas: `window.measureText` (using the HTML5 Canvas API) and `window.oscMeasureText` (using an OffscreenCanvas, which is a specialized canvas for offline rendering).

**What is tested?**

Two individual test cases are compared:

1. **measureText via Canvas**: This test case measures the execution time of the `measureText` function on the HTML5 Canvas API, where `txt` is passed as an argument.
2. **measureText via OffsetScreenCanvas**: This test case measures the execution time of the `oscMeasureText` function on the OffscreenCanvas library, which provides a more efficient way to measure text without rendering it on the screen.

**Options compared**

The two approaches differ in their implementation:

* **Canvas API (window.measureText)**:
	+ Uses the HTML5 Canvas API for rendering and measuring text.
	+ Requires a physical canvas element and access to the 2D drawing context.
	+ May be slower due to the overhead of rendering on the screen.
* **OffscreenCanvas (window.oscMeasureText)**:
	+ Uses an OffscreenCanvas, which is a specialized canvas designed for offline rendering and text measurement.
	+ Eliminates the need for a physical canvas element and access to the 2D drawing context.
	+ Potentially faster due to reduced overhead.

**Pros and Cons of each approach**

* **Canvas API (window.measureText)**:
	+ Pros: widely supported, familiar API, easy to implement.
	+ Cons: may be slower, requires a physical canvas element.
* **OffscreenCanvas (window.oscMeasureText)**:
	+ Pros: potentially faster, more efficient for text measurement, can be used offline.
	+ Cons: less widely supported, specialized library required.

**Library: OffscreenCanvas**

The `offscreen-canvas` library is a popular project that provides an implementation of the OffscreenCanvas API. It allows developers to render and measure text without rendering it on the screen, making it suitable for applications where efficiency is crucial.

**Other considerations**

* **Browser support**: The Canvas API is widely supported across most browsers, while OffscreenCanvas may require specific browser support.
* **Performance**: The execution time of both approaches will depend on various factors, including the size and complexity of the text, as well as the performance capabilities of the device or system running the benchmark.

**Alternative approaches**

Other alternatives for measuring text on a canvas include:

* Using a dedicated library like `svg-text-measurement` or `text-rendering`.
* Utilizing WebAssembly (WASM) for offline rendering and measurement.
* Implementing custom, low-level drawing and measurement functions using the underlying Canvas API.

OffsetScreenCanvas.measureText VS. Canvas.measureText (version: 0)

Comparing performance of: `measureText via Canvas vs measureText via OffsetScreenCanvas`

Created: 3 years ago by: Guest

Go to the latest result

measureText via Canvas

measureText via OffsetScreenCanvas

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

OffsetScreenCanvas.measureText VS. Canvas.measureText (version: 0)

Comparing performance of: measureText via Canvas vs measureText via OffsetScreenCanvas

Created: 3 years ago by: Guest

Go to the latest result

measureText via Canvas

measureText via OffsetScreenCanvas

Historical Performance Data aggregated from 15 community runs

Desktop Results:

Chrome 15 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: `measureText via Canvas vs measureText via OffsetScreenCanvas`