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: one year ago

left

2.9M/s

translate

1.1M/s

View exact numbers

Test name	Executions per second
✓ left	2,905,751 Ops/sec
translate	1,124,882 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';