Run results for: canvas quadraticCurveTo vs art

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.61 Safari/537.36

Browser: Chrome 102

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Test name	Executions per second
quadraticCurveTo	199083.1 Ops/sec
arc	194159.4 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();

Run results for: canvas quadraticCurveTo vs art

canvas quadraticCurveTo vs art

quadraticCurveTo

arc