Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
Canvas paths performance
Go to the benchmark
Embed
Embed Benchmark Result
Run details:
User agent:
Mozilla/5.0 (Android 10; Mobile; rv:129.0) Gecko/129.0 Firefox/129.0
Browser:
Firefox Mobile 129
Operating system:
Android
Device Platform:
Mobile
Date tested:
4 months ago
Test name
Executions per second
Direct draw
3.4 Ops/sec
New path
1354.5 Ops/sec
Cached path
1.9 Ops/sec
Direct with beginpath
1972.8 Ops/sec
Direct fillrect
3718.5 Ops/sec
HTML Preparation code:
<canvas align="center" id="canvas" width="800" height="800"></canvas>
Script Preparation code:
var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillStyle = 'rgba(0,1,0,1)'; var rects = [] for (var i = 0; i < 50; i++) { var width = 5 + i * 5; var height = 7 + i * 3; var path = new Path2D(); path.rect(0, 0, width, height); var rect = { x: i, y: i, width: width, height: height, cachedPath: path }; rects.push(rect); } ctx.clearRect(0, 0, 500, 500);
Tests:
Direct draw
for (var i = 0; i < rects.length; i++) { var rect = rects[i]; ctx.rect(rect.x, rect.y, rect.width, rect.height); ctx.fill(); }
New path
for (var i = 0; i < rects.length; i++) { var rect = rects[i]; var path = new Path2D(); path.rect(rect.x, rect.y, rect.width, rect.height) ctx.fill(path) }
Cached path
for (var i = 0; i < rects.length; i++) { var rect = rects[i]; ctx.translate(rect.x, rect.y); ctx.fill(rect.path); ctx.translate(-rect.x, -rect.y); }
Direct with beginpath
for (var i = 0; i < rects.length; i++) { var rect = rects[i]; ctx.beginPath(); ctx.rect(rect.x, rect.y, rect.width, rect.height); ctx.fill(); }
Direct fillrect
for (var i = 0; i < rects.length; i++) { var rect = rects[i]; ctx.fillRect(rect.x, rect.y, rect.width, rect.height); }