Benchmark: Translucent RGBa vs Opaque RGBa with global alpha

HTML Preparation code:

<canvas id="canvasOne" width="400" height="400"></canvas>
<canvas id="canvasTwo" width="400" height="400"></canvas>

Script Preparation code:

var canvasOne = document.getElementById("canvasOne");
var ctxOne = canvasOne.getContext("2d", { alpha: false });

var canvasTwo = document.getElementById("canvasTwo");
var ctxTwo = canvasTwo.getContext("2d", { alpha: false });

Tests:

Translucent RGBa
ctxOne.clearRect(0, 0, 400, 400); ctxOne.beginPath(); ctxOne.fillStyle = 'rgba(231, 76, 60, 0.5)'; ctxOne.arc(200, 200, 100, 0, Math.PI * 2, true); ctxOne.fill();
Opaque RGBa with globalAlpha
ctxTwo.clearRect(0, 0, 400, 400); ctxTwo.beginPath(); ctxTwo.fillStyle = 'rgba(231, 76, 60, 1)'; ctxTwo.globalAlpha = 0.5; ctxTwo.arc(200, 200, 100, 0, Math.PI * 2, true); ctxTwo.fill();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Translucent RGBa
Opaque RGBa with globalAlpha

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided JSON represents a JavaScript microbenchmark test case, specifically comparing the performance of two approaches for rendering an RGBA (Red, Green, Blue, Alpha) filled circle on a canvas element: one using translucent RGBa with alpha blending and another using opaque RGBa with global alpha.

**Script Preparation Code**

The script preparation code sets up two canvases (`canvasOne` and `canvasTwo`) and their respective 2D drawing contexts (`ctxOne` and `ctxTwo`). The context options for each canvas specify that the alpha channel should be disabled (`alpha: false`) to compare the performance of translucent RGBa with opaque RGBa.

**Benchmark Definition**

The benchmark definition consists of two test cases:

1. **Translucent RGBa**: This test case defines a filled circle on `ctxOne` using the `fillStyle` property set to `'rgba(231, 76, 60, 0.5)'`. The `alpha` channel is explicitly set to 0.5, which enables alpha blending.
2. **Opaque RGBa with globalAlpha**: This test case defines a filled circle on `ctxTwo` using the `fillStyle` property set to `'rgba(231, 76, 60, 1)'`. The `globalAlpha` property is set to 0.5, which enables alpha blending, and the `alpha` channel is explicitly set to 1.

**Comparison of Approaches**

The two approaches differ in how they handle alpha blending:

* **Translucent RGBa**: Uses explicit alpha values (0.5) for the fill style and blends with the canvas background.
* **Opaque RGBa with globalAlpha**: Sets `globalAlpha` to 0.5, which enables alpha blending, but still requires an explicit alpha value of 1 for the fill style.

**Pros and Cons**

* **Translucent RGBa**:
	+ Pros: More control over the blending process, potentially more efficient.
	+ Cons: Requires explicit alpha values, can lead to more complex calculations.
* **Opaque RGBa with globalAlpha**:
	+ Pros: Simplifies the blending process, reduces calculations.
	+ Cons: Less control over blending, may be less efficient.

**Library and Special JS Feature**

The `globalAlpha` property is a standard JavaScript feature that enables alpha blending for 2D drawing contexts. It is not specific to any library.

**Device Platform and Operating System**

The benchmark was run on an iPhone running Mobile Safari 17, with iOS 17.1.1 as the operating system.

**Other Alternatives**

If you wanted to compare these approaches using a different method, you could consider:

* Using a color management library like Web Colors or Color-Convert to manage alpha blending.
* Implementing a custom alpha blending algorithm instead of relying on `globalAlpha`.
* Comparing the performance of translucent and opaque RGBa using a shader-based approach.

Keep in mind that these alternatives would require significant changes to the benchmark code and might not provide the same level of accuracy as the original test case.

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 17_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1.1 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 17 on iOS 17.1.1

View result in a separate tab

Test name	Executions per second
Translucent RGBa	834468.2 Ops/sec
Opaque RGBa with globalAlpha	347293.3 Ops/sec

Related benchmarks:

Translucent RGBa vs Opaque RGBa with global alpha (version: 0)

Comparing performance of: Translucent RGBa vs Opaque RGBa with globalAlpha

Created: one year ago by: Guest

Jump to the latest result

Translucent RGBa

Opaque RGBa with globalAlpha

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):