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

left

1.4M/s

translate

82K/s

View exact numbers

Test name	Executions per second
✓ left	1,405,123 Ops/sec
translate	81,819 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';