Benchmark: drawing pixels: putImageData vs fillRect v2

HTML Preparation code:

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

Script Preparation code:

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

Tests:

putImageData
for (var y = 0; y < 180; y++) { for (var x = 0; x < 320; x++) { var i = y * 320 * 4 + x * 4; pixels[i + 0] = Math.floor(Math.random() * 256); pixels[i + 1] = Math.floor(Math.random() * 256); pixels[i + 2] = Math.floor(Math.random() * 256); pixels[i + 3] = 255; } } aa.putImageData(imgdata, 0, 0);
fillRect
for (var y = 0; y < 180; y++) { for (var x = 0; x < 320; x++) { var r = Math.floor(Math.random() * 256); var g = Math.floor(Math.random() * 256); var b = Math.floor(Math.random() * 256); bb.fillStyle = `rgb(${r},${g},${b})`; bb.fillRect(x, y, 1, 1); } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
putImageData
fillRect

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:147.0) Gecko/20100101 Firefox/147.0

Browser/OS: Firefox 147 on Windows

View result in a separate tab

Test name	Executions per second
putImageData	1438.6 Ops/sec
fillRect	1.2 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark described in the provided JSON tests the performance of two methods used for rendering pixels on an HTML canvas: `putImageData` and `fillRect`. Both methods have their own use cases and implementations in the context of drawing operations on a 2D canvas.

### Benchmark Overview

- **Test Methods**: The benchmark compares:
  - **`putImageData`**: This method takes an `ImageData` object, which represents a rectangle of pixel data, and places it on the canvas.
  - **`fillRect`**: This method draws a filled rectangle based on the provided color and position for each pixel on the canvas.

### Pros and Cons

#### `putImageData`
- **Pros**:
  - Efficient for large blocks of pixel data since it processes the entire pixel array at once.
  - Ideal for scenarios where you need to manipulate or generate pixel data in bulk before rendering.
- **Cons**:
  - Requires pre-assembly of pixel data into an `ImageData` object, which may incur overhead for smaller operations.

#### `fillRect`
- **Pros**:
  - Simpler to use for drawing individual pixels or small shapes, as it doesn't require beforehand pixel data preparation.
  - Offers the ability to set different colors for each rectangle, making it flexible for certain rendering use cases.
- **Cons**:
  - Significantly less efficient than `putImageData` for filling large areas, as it invokes multiple draw calls (one for each pixel).

### Alternative Considerations

When comparing these two methods, developers might consider the following alternatives:

1. **Pixel Manipulation Libraries**: Libraries such as `fabric.js` or `p5.js` provide higher-level abstractions for drawing, making it easier to create complex graphics without delving into low-level methods. However, these can add additional overhead depending on the complexity of the provided functionality.

2. **WebGL**: For high-performance graphics rendering, especially for animations or games, using WebGL (via libraries like Three.js or PixiJS) can provide significant performance improvements. However, WebGL has a steeper learning curve and requires knowledge of shaders and the graphics pipeline.

3. **RequestAnimationFrame**: For continuous drawing operations (like animations), leveraging `requestAnimationFrame` in conjunction with either method can improve performance by synchronizing rendering with the refresh rate of the display.

### Summary of Test Results

The benchmark results indicate that:

- **`putImageData`** achieved approximately **830.63 executions per second**.
- **`fillRect`** significantly decreased to around **21.43 executions per second**.

These results clearly show that using `putImageData` is far more performant for the scenario tested, especially when working with larger sets of pixel data. This benchmarking suggests that developers should prefer `putImageData` for bulk pixel operations while reserving `fillRect` for simpler, smaller graphics tasks.

Related benchmarks:

drawing pixels: putImageData vs fillRect v2 (version: 1)

Comparing performance of: putImageData vs fillRect

Created: one year ago by: Guest

Jump to the latest result

putImageData

fillRect

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):