Benchmark: Performance HTMLCanvasElement vs OffscreenCanvas

Script Preparation code:

function draw(canvas) {
  const ctx = canvas.getContext("2d")

  // Shadow
  ctx.shadowColor = "red";
  ctx.shadowBlur = 15;

  // Rectangle
  ctx.fillStyle = "blue";
  ctx.fillRect(20, 20, 150, 100);
}

Tests:

HTMLCanvasElement
draw(document.createElement("canvas"))
OffscreenCanvas
draw(new OffscreenCanvas(300, 150))

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
HTMLCanvasElement
OffscreenCanvas

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, compared, and discussed.

**What's being tested:**

The benchmark is comparing the performance of two canvas rendering approaches:

1. **HTMLCanvasElement**: This approach uses a real HTML5 canvas element created in the DOM.
2. **OffscreenCanvas**: This approach uses an `OffscreenCanvas` object, which is a low-level, non-DOM canvas element that doesn't interact with the browser's DOM.

**Options compared:**

The benchmark is comparing the performance of these two approaches for a simple drawing operation: rendering a red shadow and a blue rectangle on a 150x100 pixel area. The drawing code is identical in both approaches, except for the fact that `HTMLCanvasElement` is used with a real canvas element, while `OffscreenCanvas` uses an `OffscreenCanvas` object.

**Pros and cons of each approach:**

1. **HTMLCanvasElement**: Pros:
	* Easier to use and manage, as it's a standard DOM element.
	* Automatic rendering and flushing of the frame buffer.
Cons:
	* Can be slower due to DOM overhead and event handling.
	* May suffer from performance issues in certain browsers or hardware configurations.
2. **OffscreenCanvas**: Pros:
	* Can be faster due to its low-level, non-DOM nature.
	* Less browser-specific issues.
Cons:
	* Requires more manual memory management and error handling.
	* Not as convenient to use for simple rendering tasks.

**Library and syntax considerations:**

The benchmark doesn't use any libraries or special JavaScript features. The `OffscreenCanvas` API is a standard part of the Web API, introduced in modern browsers (Chrome 101 and later).

**Other alternatives:**

While not explicitly mentioned, other alternative approaches to canvas rendering could include:

1. **WebGL**: A more advanced graphics API that can be used for high-performance rendering.
2. **Canvas with WebAssembly**: Using WASM modules to accelerate performance-critical rendering tasks.

Keep in mind that the choice of rendering approach depends on the specific use case, performance requirements, and target audience.

**Benchmark preparation code:**

The provided `Script Preparation Code` defines a simple drawing function (`draw`) that sets up a canvas context with a red shadow and blue rectangle. This code is identical for both `HTMLCanvasElement` and `OffscreenCanvas`.

**Individual test cases:**

Each test case runs the same `draw` function but uses either `HTMLCanvasElement` or `OffscreenCanvas` to render the drawing. The benchmark then measures the execution time of each approach.

**Benchmark result:**

The latest benchmark results show that `OffscreenCanvas` outperforms `HTMLCanvasElement`, with an average execution rate of 577.12 executions per second compared to 263.19 for `HTMLCanvasElement`. This suggests that using a low-level, non-DOM canvas element can lead to faster performance in this specific benchmark.

Related benchmarks:

Performance HTMLCanvasElement vs OffscreenCanvas (version: 0)

Comparing performance of: HTMLCanvasElement vs OffscreenCanvas

Created: 3 years ago by: Guest

Jump to the latest result

HTMLCanvasElement

OffscreenCanvas

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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