Benchmark: Overhead of saving and restoring context state 3.0

HTML Preparation code:

<canvas id="canvas" width="800" height="300"></canvas>

Script Preparation code:

$canvas = document.getElementById('canvas');
$context = $canvas.getContext('2d');
$context.clearRect(0, 0, 800, 300);

$iterations = 500;

Tests:

Not saving and restoring context state
for (let i=0; i<$iterations; ++i) { $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.translate(30, 30); $context.fillRect(0, 0, 100, 100); $context.translate(-30, -30); }
Saving and restoring context state
for (let i=0; i<$iterations; ++i) { $context.save(); $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.translate(30, 30); $context.fillRect(0, 0, 1, 1); $context.restore(); }

Rendered benchmark preparation results:

Previous results

Test case name	Result
Not saving and restoring context state
Saving and restoring context state

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Windows

Test name	Executions per second
Not saving and restoring context state	1013.3 Ops/sec
Saving and restoring context state	727.6 Ops/sec

Overhead of saving and restoring context state 3.0 (version: 0)