Run results for: Using a global context variable versus getting the context on each draw call

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:78.0) Gecko/20100101 Firefox/78.0

Browser: Firefox 78

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: 4 years ago

Test name	Executions per second
Using a global context variable	1599.6 Ops/sec
Invoking getContext() before every fillRect()	1464.8 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:

Using a global context variable
for (let i=0; i<$iterations; ++i) { $context.fillStyle = 'rgba(100,150,200,0.9)'; $context.fillRect(0, 0, 1, 1); }
Invoking getContext() before every fillRect()
for (let i=0; i<$iterations; ++i) { const context = $canvas.getContext('2d'); context.fillStyle = 'rgba(100,150,200,0.9)'; context.fillRect(0, 0, 1, 1); }