Run results for: canvas style.left vs translate

Run details:

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

Browser: Firefox 132

Operating system: Windows

Device Platform: Desktop

Date tested: 2 days ago

Test name	Executions per second
translate	81819.2 Ops/sec
left	1405123.4 Ops/sec

HTML Preparation code:

<canvas id="canvas" width="200" height="200" style="position: relative; border: 1px solid red"/>

Script Preparation code:

var canvas  = document.getElementById("canvas");
var ctx = canvas.getContext('2d');

function draw() {
        ctx.beginPath();
				ctx.rect(4, 4, 50, 50);
        ctx.lineWidth = 4
        ctx.fillStyle = "green";
        ctx.strokeStyle = "black";
        ctx.stroke();
        ctx.fill();
}
       
draw();
var x = 0;

Tests:

translate
ctx.clearRect(0, 0, 200, 200); ctx.save(); ctx.translate(x++, 0); draw(); ctx.restore();
left
canvas.style.left = (x++) + 'px';