Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Canvas filling test
(version: 1)
Comparing performance of:
Gradient literal vs gradient literal 2
Created:
one year ago
by:
Guest
Go to the latest result
HTML Preparation code:
<canvas id="canvasM" data-pixel-ratio="2" style="position:relative; z-index:0;"></canvas>
Script Preparation code:
var canvas = document.getElementById('canvasM'); let ctx = canvas.getContext('2d'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; const xMult = 255 / canvas.width const yMult = 255 / canvas.height
Tests:
Gradient literal
for(let x = 0; x<canvas.width;x++){ for(let y = 0; y < canvas.height; y++){ ctx.fillStyle = `rgb(${x*xMult},${y*yMult},0)` ctx.fillRect(x,y,1,1) } }
gradient literal 2
for(let x = 0; x<canvas.width;x++){ for(let y = 0; y < canvas.height; y++){ ctx.fillStyle = `rgb(${x*xMult},${y*yMult},0)` ctx.fillRect(x,y,1,1) } }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Gradient literal
gradient literal 2
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/131.0.0.0 Safari/537.36
Browser/OS:
Chrome 131 on Chrome OS 14541.0.0
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=581814" width="100%" height="500px"></iframe>
Gradient literal
15/s
gradient literal 2
15/s
View exact numbers
Test name
Executions per second
✓
Gradient literal
15 Ops/sec
gradient literal 2
15 Ops/sec
Related benchmarks
rgb vs rgba canvas
rgb vs rgba vs hex canvas
rgb vs rgba vs hex
rgb vs rgba (1 & 0.5) vs hex canvas
Comments
Confirm delete:
Do you really want to delete benchmark?