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

Test name	Executions per second
HTMLCanvasElement	23284.6 Ops/sec
OffscreenCanvas	20612.2 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.

Related benchmarks:

Performance HTMLCanvasElement vs OffscreenCanvas no create (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

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