Benchmark: Performance HTMLCanvasElement vs OffscreenCanvas no create

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);
}

window. raw = document.createElement("canvas")
window. off = new OffscreenCanvas(300, 150)

Tests:

HTMLCanvasElement
draw(raw)
OffscreenCanvas
draw(off)

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:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 135 on Android

View result in a separate tab

HTMLCanvasElement

23K/s

OffscreenCanvas

21K/s

View exact numbers

Test name	Executions per second
✓ HTMLCanvasElement	23,285 Ops/sec
OffscreenCanvas	20,612 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and test cases.

**Benchmark Definition:** The provided JSON defines two benchmarks: one for `HTMLCanvasElement` and another for `OffscreenCanvas`. Both benchmarks measure the performance of drawing on these canvas elements, specifically with a rectangle shadow and filling style.

**Script Preparation Code:**
The script preparation code creates an offscreen canvas element using the `OffscreenCanvas` constructor. This is done to isolate the rendering process from the main thread, reducing potential overheads and improving performance. The `raw` variable represents this offscreen canvas, while the `off` variable is an instance of the `OffscreenCanvas` class.

**Library:** The `OffscreenCanvas` library is used to create a detached canvas element that can be rendered outside the main rendering thread. This allows for better isolation and performance characteristics compared to the regular `HTMLCanvasElement`.

**Pros of using OffscreenCanvas:**

* Better isolation from the main thread, reducing potential overheads
* Improved performance due to reduced overheads associated with rendering

**Cons of using OffscreenCanvas:**

* Requires additional setup and management, as it needs to be cleared and updated manually
* May have higher memory usage compared to regular `HTMLCanvasElement`

**Pros of using HTMLCanvasElement:**

* No additional setup or management required
* Lower memory usage compared to `OffscreenCanvas`
* Still provides good performance, especially when used with optimized rendering techniques

**Cons of using HTMLCanvasElement:**

* May have higher overheads due to the need for main thread synchronization
* Less isolated from other tasks on the same thread

**Other Considerations:**
When choosing between `HTMLCanvasElement` and `OffscreenCanvas`, consider the specific requirements and constraints of your application. If you prioritize performance, especially in scenarios where rendering is CPU-bound, `OffscreenCanvas` might be a better choice. However, if simplicity and lower overhead are more important, `HTMLCanvasElement` could be the way to go.

**Individual Test Cases:**
The two test cases compare the performance of drawing on an offscreen canvas (`off`) versus a regular canvas element (`raw`). The benchmark definition for each case is identical, measuring the execution rate of the drawing function in both scenarios.

**Latest Benchmark Result:**
The provided latest benchmark result shows the execution rates for each test case. In this case, `HTMLCanvasElement` outperforms `OffscreenCanvas`, with a significantly higher execution rate per second (48262 vs 8747). However, please note that the actual performance difference may vary depending on specific use cases and scenarios.

Performance HTMLCanvasElement vs OffscreenCanvas no create (version: 0)

Comparing performance of: `HTMLCanvasElement vs OffscreenCanvas`

Created: 3 years ago by: Guest

Go to the latest result

HTMLCanvasElement

OffscreenCanvas

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Performance HTMLCanvasElement vs OffscreenCanvas no create (version: 0)

Comparing performance of: HTMLCanvasElement vs OffscreenCanvas

Created: 3 years ago by: Guest

Go to the latest result

HTMLCanvasElement

OffscreenCanvas

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: `HTMLCanvasElement vs OffscreenCanvas`