<canvas id="canvas" width="800" height="300"></canvas>
$canvas = document.getElementById('canvas');
$context = $canvas.getContext('2d');
$context.clearRect(0, 0, 800, 300);
$iterations = 500;
for (let i=0; i<$iterations; ++i) {
$context.fillStyle = 'rgba(100,150,200,0.9)';
$context.fillRect(0, 0, 1, 1);
}
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();
}
--enable-precise-memory-info
flag.
Test case name | Result |
---|---|
Not saving and restoring context state | |
Saving and restoring context state |
Test name | Executions per second |
---|---|
Not saving and restoring context state | 4360.7 Ops/sec |
Saving and restoring context state | 2477.9 Ops/sec |
Let's break down the provided benchmark JSON and explain what is being tested, compared, and other considerations.
Benchmark Definition
The provided benchmark definition represents a JavaScript microbenchmark that tests the overhead of saving and restoring context state in a 2D drawing context using the HTML5 Canvas API. The test creates a canvas element with a size of 800x300 pixels, sets up a 2D drawing context, clears it, and then performs two types of draws:
Comparison of Options
The benchmark compares two options:
Pros and Cons
Here are some pros and cons of each option:
Library and Syntax
There is no library used in this benchmark. The script uses standard JavaScript features like loops, variables, and the Canvas API.
Special JS Features or Syntax (None)
Since there are no special JavaScript features or syntax used in this benchmark, we can move on to the next section.
Other Alternatives
Other alternatives for testing this type of benchmark could include:
drawImage()
However, these variations would require careful consideration of the potential impact on the accuracy and relevance of the benchmark results.
Overall, this benchmark provides a useful insight into the overhead of saving and restoring context state in JavaScript, which can be important for optimizing performance-critical code.