Run results for: Overhead of saving and restoring context state

Run details:

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 16_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/16.1 Mobile/15E148 Safari/604.1

Browser: Mobile Safari 16

Operating system: iOS 16.1.1

Device Platform: Mobile

Date tested: 2 years ago

Benchmark engine: Benchmark.js

Not saving and restoring context state

5K/s

Saving and restoring context state

3K/s

View exact numbers

Test name	Executions per second
✓ Not saving and restoring context state	4,949 Ops/sec
Saving and restoring context state	3,245 Ops/sec

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.fillRect(0, 0, 1, 1); }
Saving and restoring context state
for (let i=0; i<$iterations; ++i) { $context.save(); $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.fillRect(0, 0, 1, 1); $context.restore(); }