Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Run results for:
canvas fillStyle color format w/ rendering 2
canvas fillStyle color format
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=577961" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0
Browser:
Chrome 131
Operating system:
Windows
Device Platform:
Desktop
Date tested:
one year ago
Benchmark engine:
Benchmark.js
rgba func without spaces
991K/s
rgba func with spaces
984K/s
hex rgba
976K/s
View exact numbers
Test name
Executions per second
✓
rgba func without spaces
991,073 Ops/sec
rgba func with spaces
983,756 Ops/sec
hex rgba
975,912 Ops/sec
Script Preparation code:
var canvas = document.createElement("canvas"); canvas.width = 1920; canvas.height = 1080; var ctx = canvas.getContext("2d");
Tests:
hex rgba
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, 1920, 1080); ctx.fillStyle = "#FF000066"; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillRect(0, 0, 1920, 1080);
rgba func with spaces
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, 1920, 1080); ctx.fillStyle = "rgba(255, 0, 0, 0.4)"; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillRect(0, 0, 1920, 1080);
rgba func without spaces
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, 1920, 1080); ctx.fillStyle = "rgba(255,0,0,0.4)"; ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.fillRect(0, 0, 1920, 1080);