Run results for: canvas style.left vs translate

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser: Chrome 130

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 7 days ago

Test name	Executions per second
translate	440038.2 Ops/sec
left	1392642.9 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';