Benchmark: canvas style.left vs translate

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';

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
translate
left

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Firefox 132 on Windows

View result in a separate tab

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

canvas style.left vs translate (version: 1)

Comparing performance of: `translate vs left`

Created: one year ago by: Guest

Go to the latest result

translate

left

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

canvas style.left vs translate (version: 1)

Comparing performance of: translate vs left

Created: one year ago by: Guest

Go to the latest result

translate

left

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `translate vs left`