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))

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: 21 hours ago)

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

Browser/OS: Chrome 147 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
measureText via Canvas	167213.9 Ops/sec
measureText via OffsetScreenCanvas	173218.3 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.

Related benchmarks:

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

Comparing performance of: measureText via Canvas vs measureText via OffsetScreenCanvas

Created: 3 years ago by: Guest

Jump to the latest result

measureText via Canvas

measureText via OffsetScreenCanvas

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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