Benchmark: clearing canvas - MeasureThat.net

HTML Preparation code:

<canvas id='aa' width='320' height='180'></canvas>
<canvas id='bb' width='320' height='180'></canvas>
<canvas id='cc' width='320' height='180'></canvas>
<canvas id='dd' width='320' height='180'></canvas>

Script Preparation code:

var aa = document.getElementById('aa').getContext('2d');
var bb = document.getElementById('bb').getContext('2d');
var cc = document.getElementById('cc').getContext('2d');
var dd = document.getElementById('dd').getContext('2d');

var pixels = new Uint8ClampedArray(320 * 180 * 4);
var imgdata = new ImageData(pixels, 320, 180);

Tests:

putImageData two loops
for (var y = 0; y < 180; y++) { for (var x = 0; x < 320; x++) { var i = y * 180 * 4 + x * 4; pixels[i + 0] = 0; pixels[i + 1] = 0; pixels[i + 2] = 0; pixels[i + 3] = 0; } } aa.putImageData(imgdata, 0, 0);
fillRect
bb.fillStyle = `#0000`; bb.fillRect(0, 0, 320, 180);
clearRect
bb.clearRect(0, 0, 320, 180);
putImageData one loop
for (var i = 0; i < 180 * 320 * 4; i++) pixels[i]=0; dd.putImageData(imgdata, 0, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
putImageData two loops
fillRect
clearRect
putImageData one loop

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Browser/OS: Chrome 133 on Windows

View result in a separate tab

Test name	Executions per second
putImageData two loops	4456.6 Ops/sec
fillRect	6101990.0 Ops/sec
clearRect	4798263.0 Ops/sec
putImageData one loop	4402.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):

LLMs can make mistakes. Check important info.

The provided JSON describes a benchmark testing the performance of various methods for clearing or drawing on HTML canvas elements in JavaScript. The benchmark includes multiple approaches to reset a canvas by filling it with solid colors or making it transparent, each with its own implications for performance.

### Benchmarked Approaches and Their Pros/Cons

1. **Two Loops with `putImageData`:**
   ```javascript
   for (var y = 0; y < 180; y++) {
       for (var x = 0; x < 320; x++) {
           var i = y * 180 * 4 + x * 4;
           pixels[i + 0] = 0; // Red
           pixels[i + 1] = 0; // Green
           pixels[i + 2] = 0; // Blue
           pixels[i + 3] = 0; // Alpha
       }
   }
   aa.putImageData(imgdata, 0, 0);
   ```
   - **Pros:**
     - This method provides fine-grained control over each pixel's color and transparency.
     - It allows for complex color manipulations before the image is drawn.
   - **Cons:**
     - The nesting of loops results in a higher computational cost, making this method the slowest among all tested.
     - It can be less efficient due to the overhead of calculating pixel indices and writing to the array.

2. **Using `fillRect`:**
   ```javascript
   bb.fillStyle = `#0000`; // Transparent black
   bb.fillRect(0, 0, 320, 180);
   ```
   - **Pros:**
     - This method is very fast due to its simplicity and optimization in the browser's rendering engine.
     - It's straightforward and requires less code, making it easier to read and maintain.
   - **Cons:**
     - Limited to solid colors and does not allow for pixel-level manipulation.
     - It may not support advanced effects as easily as pixel manipulation can.

3. **Using `clearRect`:**
   ```javascript
   bb.clearRect(0, 0, 320, 180);
   ```
   - **Pros:**
     - `clearRect` is efficient for clearing the canvas area and is optimized for this specific task.
     - It’s a built-in method designed for quickly resetting the canvas without the need for calculations related to pixel data.
   - **Cons:**
     - Similar to `fillRect`, it can't modify the color values except for clearing to a transparent background.

4. **One Loop with `putImageData`:**
   ```javascript
   for (var i = 0; i < 180 * 320 * 4; i++) 
       pixels[i] = 0; // Fill with zero
   dd.putImageData(imgdata, 0, 0);
   ```
   - **Pros:**
     - This approach minimizes the number of loops, which can have a positive impact on performance compared to the two-loop variant.
   - **Cons:**
     - It still has some overhead from the pixel index calculation and the `putImageData` call, making it slower than vector-based operations like `fillRect`.

### Summary of Benchmark Results

- The `fillRect` method shows an execution speed of approximately 6.1 million calls per second, making it the fastest method for clearing a canvas in this benchmark.
- `clearRect` comes in second with around 4.8 million calls per second, suitable for scenarios where a complete clear is needed.
- Both `putImageData` methods using loops (two loops and one loop) drastically underperformed, reaching only 4,400 to 4,500 calls per second. This indicates that iterative pixel manipulation is significantly slower than vector operations designed by rendering engines.

### Other Considerations and Alternatives

- While the methods tested here are mostly built around clearing or filling a canvas, the choice may depend on specific project requirements. If manipulation at the pixel level is necessary (e.g., for image editing), using `putImageData` would be justified despite its performance downsides.
- For animations or real-time graphics (like games), browser optimizations like off-screen canvases or request animation frames could enhance performance, mitigate slowdowns from heavy computations, and improve rendering speeds.
- Alternatives such as WebGL can also be evaluated for more complex rendering requirements and better performance in scenarios requiring rendering of images or graphics beyond simple bit manipulations.

This benchmarking provides insight into different canvas manipulation strategies, emphasizing performance trade-offs within the context of HTML5 graphics rendering.

Related benchmarks:

clearing canvas (version: 1)

Comparing performance of: putImageData two loops vs fillRect vs clearRect vs putImageData one loop

Created: 2 months ago by: Guest

Jump to the latest result

putImageData two loops

fillRect

clearRect

putImageData one loop

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 2 months ago):