Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
fill/stroke Path2D vs repeated path drawing calls
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=562860" width="100%" height="500px"></iframe>
Run details:
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:131.0) Gecko/20100101 Firefox/131.0
Browser:
Firefox 131
Operating system:
Windows
Device Platform:
Desktop
Date tested:
one year ago
Test name
Executions per second
Path2D
52309.9 Ops/sec
Draw Path Calls
3007.1 Ops/sec
Script Preparation code:
var pathCanvas = document.createElement("canvas"), pathCtx = pathCanvas.getContext("2d"), drawCanvas = document.createElement("canvas"), drawCtx = drawCanvas.getContext("2d"), path2D = new Path2D(); pathCanvas.width = drawCanvas.width = 640; pathCanvas.height = drawCanvas.height = 480; path2D.moveTo(20, 10); path2D.lineTo(80, 10); path2D.quadraticCurveTo(90, 10, 90, 20); path2D.lineTo(90, 60); path2D.quadraticCurveTo(90, 70, 80, 70); path2D.lineTo(20, 70); path2D.quadraticCurveTo(10, 70, 10, 60); path2D.lineTo(10, 20); path2D.quadraticCurveTo(10, 10, 20, 10);
Tests:
Path2D
pathCtx.fill(path2D);
Draw Path Calls
drawCtx.beginPath(); drawCtx.moveTo(20, 10); drawCtx.lineTo(80, 10); drawCtx.quadraticCurveTo(90, 10, 90, 20); drawCtx.lineTo(90, 60); drawCtx.quadraticCurveTo(90, 70, 80, 70); drawCtx.lineTo(20, 70); drawCtx.quadraticCurveTo(10, 70, 10, 60); drawCtx.lineTo(10, 20); drawCtx.quadraticCurveTo(10, 10, 20, 10); drawCtx.fill();