Benchmark: putImageData vs drawImage manual

HTML Preparation code:

<canvas id="canvas" width="320" height="320"></canvas>

Script Preparation code:

const canvas = document.getElementById('canvas')
canvas.style.imageRendering = 'pixelated'
canvas.style.backgroundColor = '#000'
canvas.style.outline = 'none'
canvas.style.cursor = 'none'
canvas.style.transform = `scale(2)`
document.body.replaceChildren(canvas)

const ctx = canvas.getContext('2d')

function drawimgdata(img) {
  ctx.drawImage(img, 0, 0)
  img.close()
}

function drawpixels(pixels) {
  const imgdata = new ImageData(pixels, 320, 180)
  ctx.putImageData(imgdata, 0, 0)
}

function drawrandom() {
  // for (let n = 0; n < 300; n++)
  for (let y = 0; y < 180; y++) {
    for (let x = 0; x < 320; x++) {
      let i = y * 320 * 4 + x * 4
      pixels[i + 0] = Math.random() * 255
      pixels[i + 1] = Math.random() * 255
      pixels[i + 2] = Math.random() * 255
      pixels[i + 3] = 255
    }
  }
}

const c = new OffscreenCanvas(320, 180)
const ctx2 = c.getContext('2d')

const pixels = new Uint8ClampedArray(320 * 180 * 4)
const imgdata = new ImageData(pixels, 320, 180)

Tests:

imgdata
drawrandom() ctx2.putImageData(imgdata, 0, 0) drawimgdata(c.transferToImageBitmap())
pixels
drawrandom() drawpixels(pixels)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
imgdata
pixels

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 days ago)

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

Browser/OS: Chrome 134 on Windows

View result in a separate tab

Test name	Executions per second
imgdata	1130.2 Ops/sec
pixels	1163.8 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 6 days ago):

LLMs can make mistakes. Check important info.

This benchmark compares two different methods of rendering images to a canvas in a web browser using JavaScript’s Canvas API. The specific methods being tested are `putImageData` and `drawImage`, which are commonly used for manipulating image data on HTML canvas elements.

### Benchmark Overview

1. **Benchmark Name**: `putImageData vs drawImage manual`
2. **Test Cases**:
   - **Test Case 1 (`imgdata`)**: Uses `drawImage` in combination with `ImageBitmap` via `transferToImageBitmap()`.
   - **Test Case 2 (`pixels`)**: Uses `putImageData` to draw directly from a pixel array (`Uint8ClampedArray`).

### Options Compared

1. **`drawImage` with `transferToImageBitmap()`**:
   - **Procedure**: 
     - Random pixel data is generated and drawn to an offscreen canvas. 
     - The content of the offscreen canvas is transferred to an `ImageBitmap` using the `transferToImageBitmap()` method.
     - The `drawImage` method draws the `ImageBitmap` to the main canvas.
   - **Pros**:
     - **Efficiency in Rendering**: ImageBitmap is optimized for quick rendering which could lead to better performance in some scenarios.
     - **Better Memory Management**: `ImageBitmap` is designed for efficient memory use in graphics-heavy applications.
   - **Cons**:
     - **Complexity**: The technique involves extra steps, potentially making it less straightforward for simple applications.
     - **Compatibility**: While supported in modern browsers, older browsers may not handle `ImageBitmap` effectively.

2. **`putImageData`**:
   - **Procedure**:
     - Pixel data is generated and directly drawn onto the canvas using `putImageData`.
   - **Pros**:
     - **Direct Manipulation**: Allows direct manipulation of pixel data, which can be intuitive for certain image processing tasks.
     - **Simplicity**: Fewer steps involved, making it straightforward to implement for simpler use cases.
   - **Cons**:
     - **Performance Bottleneck**: May not be as fast as using an ImageBitmap for larger images or more complex rendering tasks since `putImageData` processes pixel data one pixel at a time and can be performance intensive.

### Libraries and Features Used

- **OffscreenCanvas**: This is a feature that allows rendering to a canvas that is not visible to the user. It can be used for rendering in web workers or for off-screen rendering tasks, thus optimizing the performance by reducing render-blocking operations on the main thread. It can improve responsiveness and allows for complex rendering without affecting user interface responsiveness.

### Results Analysis

From the test results, we observe:
- **Executions Per Second**:
  - `pixels` method (with `putImageData`): 1163.84 executions/second
  - `imgdata` method (with `drawImage`): 1130.18 executions/second

The `pixels` method outperforms the `imgdata` method slightly, indicating that for this specific benchmark, using `putImageData` may be more efficient under the conditions tested.

### Other Alternatives

In addition to `putImageData` and `drawImage`, other potential alternatives for rendering images on canvas include:

- **WebGL**: For more complex graphics applications requiring hardware acceleration, WebGL provides the ability to render graphics by utilizing the GPU. This approach requires more setup and is typically used for 3D graphics but can also handle 2D rendering.
- **Image Manipulation Libraries**: Libraries like PixiJS or Fabric.js may provide higher-level abstractions over canvas operations, making it easier to handle images and sprites with built-in optimizations.
- **SVG**: For vector graphics, using SVG (Scalable Vector Graphics) can be another alternative, allowing for scalable images that maintain quality at different sizes.

### Conclusion

The benchmark provides valuable insights into performance differences between two commonly used rendering methods in JavaScript. While `putImageData` has shown better performance in this test scenario, the choice of which method to use will depend on the specific requirements of the application, including factors like complexity, browser compatibility, and rendering performance needed.

Related benchmarks:

putImageData vs drawImage manual (version: 1)

Comparing performance of: imgdata vs pixels

Created: 6 days ago by: Guest

Jump to the latest result

imgdata

pixels

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 6 days ago):