HTML Preparation code:
AخA
 
1
<canvas id="canvas" width="800" height="300"></canvas>
Script Preparation code:
x
 
$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);
    }
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    Using a global context variable
    Invoking getContext() before every fillRect()

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 4 years ago)
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.116 Safari/537.36 Edg/83.0.478.61
Chrome 83 on Windows
View result in a separate tab
Test name Executions per second
Using a global context variable 1796.8 Ops/sec
Invoking getContext() before every fillRect() 1017.4 Ops/sec