Benchmark: RGB vs RGBa vs HSL vs Hex using Canvas v2

HTML Preparation code:

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

Script Preparation code:

var canvasOne = document.getElementById("canvasOne");
var ctxOne = canvasOne.getContext("2d");

var canvasTwo = document.getElementById("canvasTwo");
var ctxTwo = canvasTwo.getContext("2d");

var canvasThree = document.getElementById("canvasThree");
var ctxThree = canvasThree.getContext("2d");

var canvasFour = document.getElementById("canvasFour");
var ctxFour = canvasFour.getContext("2d");

Tests:

RGBa
ctxOne.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctxOne.fillRect(0, 0, 400, 400); ctxOne.beginPath(); ctxOne.fillStyle = 'rgba(231, 76, 60, 0.1)'; ctxOne.arc(200, 200, 100, 0, Math.PI * 2, true); ctxOne.fill();
RGB
ctxTwo.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctxTwo.fillRect(0, 0, 400, 400); ctxTwo.beginPath(); ctxTwo.fillStyle = 'rgb(249, 206, 201)'; ctxTwo.arc(200, 200, 100, 0, Math.PI * 2, true); ctxTwo.fill();
Hex
ctxThree.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctxThree.fillRect(0, 0, 400, 400); ctxThree.beginPath(); ctxThree.fillStyle = '#f9cec9'; ctxThree.arc(200, 200, 100, 0, Math.PI * 2, true); ctxThree.fill();
HSL
ctxFour.fillStyle = 'rgba(255, 255, 255, 0.3)'; ctxFour.fillRect(0, 0, 400, 400); ctxFour.beginPath(); ctxFour.fillStyle = 'hsl(15, 90%, 64%)'; ctxFour.arc(200, 200, 100, 0, Math.PI * 2, true); ctxFour.fill();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
RGBa
RGB
Hex
HSL

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 days ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
RGBa	33203.7 Ops/sec
RGB	34466.3 Ops/sec
Hex	32449.3 Ops/sec
HSL	25447.6 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explain what's being tested.

The provided benchmark measures the performance of different ways to color fill shapes on a 2D canvas using JavaScript. The test cases compare four approaches:

1. **RGBa**: Uses the RGBA (Red, Green, Blue, Alpha) color format with transparency.
2. **RGB**: Uses the RGB (Red, Green, Blue) color format without transparency.
3. **Hex**: Uses hexadecimal notation for colors (#RRGGBB).
4. **HSL**: Uses the HSL (Hue, Saturation, Lightness) color model.

**What's being tested:**

The benchmark tests how quickly each approach can fill a shape on the canvas. The test cases create four canvases and draw a circle in each one with a different color format:

* `ctxOne` uses RGBA
* `ctxTwo` uses RGB
* `ctxThree` uses hexadecimal notation (Hex)
* `ctxFour` uses HSL

The benchmark measures the number of executions per second for each test case.

**Options comparison:**

Here's a brief overview of each approach and its pros and cons:

1. **RGBA**: Pros:
	* Can represent transparency
	* More expressive than RGB
	* Widely supported
Cons:
	* Requires more bytes to store (4 vs 3)
2. **RGB**: Pros:
	* Simple and widely supported
	* Fast access to color components
Cons:
	* No support for transparency
3. **Hex**: Pros:
	* Short and concise notation
	* Easy to parse and compare
Cons:
	* Limited expressiveness (no alpha channel)
4. **HSL**: Pros:
	* More expressive than RGB (hue, saturation, lightness)
	* Can represent a wide range of colors
Cons:
	* Less intuitive for beginners
	* Requires more computational resources

**Library usage:**

The benchmark uses the `Canvas` API to create and manipulate the canvases. The `getContext()` method returns a 2D drawing context object (`ctx`) that allows you to perform various canvas operations, such as filling shapes.

In this benchmark, the `Canvas` API is used to create four canvases with different color formats. No libraries are required for the test cases themselves; only the `Canvas` API and standard JavaScript functionality.

**Special JS features or syntax:**

The benchmark uses no special JS features or syntax beyond what's already mentioned. The focus is on comparing the performance of different color formats using a simple, straightforward approach.

Overall, this benchmark helps users understand how different color formats affect the performance of their JavaScript applications when working with canvases.

Related benchmarks:

RGB vs RGBa vs HSL vs Hex using Canvas v2 (version: 0)

Comparing performance of: RGBa vs RGB vs Hex vs HSL

Created: 4 years ago by: Guest

Jump to the latest result

RGBa

RGB

Hex

HSL

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):