Benchmark: PutImageData vs DrawImage v3

HTML Preparation code:

<canvas id='aa' width='100' height='100'></canvas>
<canvas id='bb' width='100' height='100'></canvas>

Script Preparation code:

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

Tests:

putImageData
for (var y = 0; y < 100; y++) { for (var x = 0; x < 100; x++) { var i = y * 100 * 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 < 100; y++) { for (var x = 0; x < 100; 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: one year 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	4757.0 Ops/sec
fillRect	129.2 Ops/sec

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

LLMs can make mistakes. Check important info.

### Benchmark Overview

The benchmark titled **"PutImageData vs DrawImage v3"** evaluates the performance of two different methods for rendering pixels onto an HTML `<canvas>` element: 
1. **`putImageData`**: This method allows direct manipulation of image data on a pixel-by-pixel basis.
2. **`fillRect`**: This method fills a rectangle in the canvas with a specified color.

### Comparison of Approaches

#### 1. **putImageData**
- **Method**: `aa.putImageData(imgdata, 0, 0);`
  - This approach creates an image data object (`imgdata`) filled with RGBA pixel values. The pixel manipulation occurs in a nested loop where random colors are generated for each pixel.
- **Performance**: 
  - In the latest benchmark results, this method achieved **4756.97 executions per second**.
- **Pros**:
  - More control over pixel data. It allows for precise manipulation of pixel values which can be useful for complex graphics programming.
  - Optimized for bulk pixel updates as it handles all pixels in one call.
- **Cons**:
  - It may be less straightforward for simple drawing operations compared to `fillRect`.
  - Overhead of creating an `ImageData` object which could affect performance on larger canvases.

#### 2. **fillRect**
- **Method**: `bb.fillRect(x, y, 1, 1);`
  - For this approach, several random colors are generated in a nested loop, and `fillRect` is used to draw individually colored squares for each pixel.
- **Performance**:
  - This method resulted in **129.20 executions per second**, significantly slower than `putImageData`.
- **Pros**:
  - Simplicity and ease of use for straightforward shapes and colors.
  - Ideal for drawing filled rectangles or squares without needing to manage pixel data.
- **Cons**:
  - Performance degradation when drawing many small rectangles since each call potentially involves setup overhead.
  - Less efficient for bulk operations, especially for pixel-level manipulations.

### Libraries and Features
- **Canvas API**: Both methods leverage the HTML5 Canvas API, which provides a surface for rendering graphics, animations, and other visual content on a webpage. This API allows for immediate rendering without needing to interact with the DOM for each draw operation, making it suitable for graphics-intensive applications.

### Considerations
- **Use Case**: The choice between `putImageData` and `fillRect` fundamentally depends on the specific requirements of the rendering task at hand. If pixel-level manipulation is necessary (e.g., image processing or complex pixel art), `putImageData` is superior. For drawing simple shapes or graphics where performance is less critical, `fillRect` could suffice.
- **Other Alternatives**:
  - **SVG (Scalable Vector Graphics)**: While Canvas is raster-based and better for pixel manipulation, SVG is vector-based, making it suitable for graphics that need to scale smoothly (e.g., logos).
  - **WebGL**: For more advanced graphics, particularly 3D rendering or shader-based approaches, WebGL provides a powerful alternative that can take advantage of hardware acceleration.
  - **requestAnimationFrame**: When animating graphics on a canvas, using `requestAnimationFrame` interacts more smoothly with browser rendering cycles, avoiding frame drops.

In summary, this benchmark provides valuable insights into performance differences between raster-based operations on the canvas and drawing built-in shapes, helping developers choose the right approach for their specific graphical needs.

Related benchmarks:

PutImageData vs DrawImage v3 (version: 1)

GetImageData with PutImageData vs just DrawImage

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):