Run results for: Overhead of saving and restoring context state 2.0

Run details:

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Mobile Safari/537.36

Browser: Chrome Mobile 117

Operating system: Android

Device Platform: Mobile

Date tested: one year ago

Test name	Executions per second
Saving and restoring context state	81.0 Ops/sec
No Restore	98.8 Ops/sec
Simple Restore	130.0 Ops/sec
Simple No restore	243.5 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:

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, 100, 100); $context.fillRect(50, 20, 50, 50); $context.arc(0, 0, 30, 0, 2 * Math.PI); $context.restore(); }
No Restore
for (let i=0; i<$iterations; ++i) { $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.fillRect(0, 0, 100, 100); $context.fillRect(50, 20, 50, 50); $context.arc(0, 0, 30, 0, 2 * Math.PI); }
Simple Restore
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(); }
Simple No restore
for (let i=0; i<$iterations; ++i) { $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.fillRect(0, 0, 1, 1); }