Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Test style formats on canvas
(version: 0)
Benchmark.js
Comparing performance of:
RGBA vs RGB vs HEX vs HSL
Created:
7 years ago
by:
Registered User
Go to the latest result
Script Preparation code:
const canvas = document.createElement("canvas"); var ctx = canvas.getContext("2d");
Tests:
RGBA
ctx.fillStyle = 'rgba(246,122,81, 1)'; ctx.fillStyle = 'rgba(81,246,94, 1)';
RGB
ctx.fillStyle ='rgb(246,122,81)'; ctx.fillStyle ='rgb(81,246,94)';
HEX
ctx.fillStyle = '#f67a51'; ctx.fillStyle = '#51f65e';
HSL
ctx.fillStyle = 'hsl(15, 90%, 64%)'; ctx.fillStyle = 'hsl(125, 90%, 64%)';
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (4)
Previous results
Fork
Test case name
Result
RGBA
RGB
HEX
HSL
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/129.0.0.0 Safari/537.36
Browser/OS:
Chrome 129 on Chrome OS 14541.0.0
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=562119" width="100%" height="500px"></iframe>
HEX
3.0M/s
RGB
3.0M/s
RGBA
3.0M/s
HSL
2.5M/s
View exact numbers
Test name
Executions per second
✓
HEX
2,969,104 Ops/sec
RGB
2,965,323 Ops/sec
RGBA
2,964,685 Ops/sec
HSL
2,455,363 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its test cases. **Benchmark Description** The benchmark tests how different color formats (RGBA, RGB, HEX, HSL) are rendered on a canvas element in JavaScript. Specifically, it measures the execution time for setting and resetting the fill style multiple times. **Options Compared** 1. **RGBA**: Sets the fill style to an RGBA color with specific red, green, blue, and alpha values. 2. **RGB**: Sets the fill style to an RGB color with specific red, green, and blue values. 3. **HEX**: Sets the fill style to a color represented by a hexadecimal value (e.g., #f67a51). 4. **HSL**: Sets the fill style to a color represented by a hue-saturation-lightness value (e.g., hsl(15, 90%, 64%)). **Pros and Cons of Each Approach** 1. **RGBA**: Pros: widely supported, allows for transparency and precision control over color values. Cons: may be slower due to the need to specify alpha values. 2. **RGB**: Pros: simple and fast, widely supported. Cons: no transparency support, limited control over color values. 3. **HEX**: Pros: concise and readable representation of colors. Cons: limited to 16 million color options (256^6), may not be as precise as other formats. 4. **HSL**: Pros: allows for more nuanced control over color values, can represent a wide range of colors. Cons: less widely supported than RGB or HEX. **Library and Special JS Features** There are no specific libraries mentioned in the benchmark definition or test cases. However, it's likely that the benchmark is using the built-in `Canvas` API and JavaScript syntax to execute the tests. **Other Considerations** * Color formats may be affected by various factors like display resolution, color calibration, and screen rendering algorithms. * The benchmark assumes that the canvas element is already created and available in the DOM. If this were not the case, additional setup code would be needed. **Alternatives to MeasureThat.net** MeasureThat.net seems to be a custom-built benchmarking tool, so alternatives might include: 1. Other online benchmarking platforms that offer similar JavaScript microbenchmarking capabilities. 2. In-house testing frameworks or tools used by developers and companies for performance measurement. 3. Standardized benchmarks like those provided by the Web Performance Team or other reputable organizations. Keep in mind that the specific test cases, execution counts, and results provided in MeasureThat.net are not publicly available outside of the platform itself.
Related benchmarks
RGB vs RGBa vs HSL vs Hex using Canvas
rgb vs rgba (1 & 0.5) vs hex canvas
RGB vs RGBa vs HSL vs Hex using Canvas v2
RGB vs RGBa vs HSL vs Hex using Canvas with alpha = false and all solid colors
Comments
Confirm delete:
Do you really want to delete benchmark?