Run results for: canvas quadraticCurveTo vs art

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:146.0) Gecko/20100101 Firefox/146.0

Browser: Firefox 146

Operating system: Windows

Device Platform: Desktop

Date tested: 6 months ago

quadraticCurveTo

529K/s

arc

471K/s

View exact numbers

Test name	Executions per second
✓ quadraticCurveTo	529,093 Ops/sec
arc	471,076 Ops/sec

Script Preparation code:

var canvas = document.createElement("canvas");
canvas.width = 500;
canvas.height = 500;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);
var startAngle = 180 * Math.PI / 180;
var endAngle = 270 * Math.PI / 180;

Tests:

quadraticCurveTo
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, 500, 500); ctx.setTransform(1, 0, 0, 1, 10, 10); ctx.strokeStyle = "red"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, 10); ctx.quadraticCurveTo(0, 0, 10, 0); ctx.stroke();
arc
ctx.setTransform(1, 0, 0, 1, 0, 0); ctx.clearRect(0, 0, 500, 500); ctx.setTransform(1, 0, 0, 1, 10, 10); ctx.strokeStyle = "red"; ctx.lineWidth = 2; ctx.beginPath(); ctx.moveTo(0, 10); ctx.arc(10, 10, 10, startAngle, endAngle, false); ctx.stroke();