Benchmark: canvas blitting techniques

HTML Preparation code:

<canvas id="c" width="800" height="300"></canvas>

Script Preparation code:

width = 800;
height = 300;
canvas = document.getElementById('c');
context = canvas.getContext('2d');
buffer = context.createImageData(width, height);
for(let i=0;i<width*height;i++){
  buffer.data[i*4+0] = Math.random()*255;
  buffer.data[i*4+1] = Math.random()*255;
  buffer.data[i*4+2] = Math.random()*255;
  buffer.data[i*4+3] = 255;
}

Tests:

putImageData
context.putImageData(buffer, 0, 0);
unique fillRect
for(let y=0;y<300;y++){ for(let x=0;x<800;x++){ const offset = (y*width+x)*4; context.fillStyle = `rgb(${buffer.data[offset+0]}, ${buffer.data[offset+1]}, ${buffer.data[offset+2]})`; context.fillRect(x, y, 1, 1); } }
2 tone fillRect
context.fillStyle = `rgb(192, 192, 192)`; for(let y=0;y<300;y++){ for(let x=0;x<800;x++){ const offset = (y*width+x)*4; if(buffer.data[offset+0]>127){ context.fillRect(x, y, 1, 1); } } } context.fillStyle = `rgb(64, 64, 64)`; for(let y=0;y<300;y++){ for(let x=0;x<800;x++){ const offset = (y*width+x)*4; if(buffer.data[offset+0]<128){ context.fillRect(x, y, 1, 1); } } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
putImageData
unique fillRect
2 tone 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/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
putImageData	5812.9 Ops/sec
unique fillRect	2.8 Ops/sec
2 tone fillRect	6.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark, "canvas blitting techniques", measures the performance of three different methods for rendering pixel data on an HTML canvas element in JavaScript.

**Methods Compared**

1. **putImageData**: This method uses the `putImageData` function to draw the entire image data buffer onto the canvas at once.
2. **unique fillRect**: This method uses a nested loop to iterate over each pixel of the image data buffer and draws only that pixel using `fillRect`. This approach is more complex but can lead to better performance in certain cases.
3. **2 tone fillRect**: This method uses a similar approach as `unique fillRect` but with an additional threshold (127) for determining which pixels to draw.

**Pros and Cons**

* **putImageData**:
	+ Pros: Simple, straightforward implementation, fast execution time
	+ Cons: May not be optimized for modern browsers or hardware acceleration
* **unique fillRect**:
	+ Pros: Can lead to better performance due to reduced overhead of drawing individual pixels
	+ Cons: More complex implementation, may require more browser-specific optimizations
* **2 tone fillRect**:
	+ Pros: Combines the benefits of `putImageData` and `unique fillRect`, with an additional optimization for pixel color thresholds
	+ Cons: May still be less efficient than `putImageData` due to the added complexity

**Library and Special JS Features**

There are no libraries explicitly mentioned in the benchmark definition. However, it is worth noting that the use of `createImageData` and `getContext` functions implies a reliance on modern JavaScript capabilities, such as canvas element support.

**Other Considerations**

The benchmark results show varying execution times for each method across different browsers and devices. This suggests that the performance differences between these methods may be dependent on factors like browser optimizations, device hardware, and JavaScript engine implementation.

**Alternatives**

If you're looking to optimize your own pixel rendering on HTML canvas elements, some alternative approaches might include:

* Using WebAssembly (WASM) or WebGL for accelerated graphics rendering
* Implementing custom pixel shaders using the WebGL API
* Utilizing browser-specific optimizations like hardware acceleration or GPU-based rendering

Keep in mind that these alternatives may require more expertise and resources to implement effectively.

Related benchmarks:

canvas blitting techniques (version: 0)

Comparing performance of: putImageData vs unique fillRect vs 2 tone fillRect

Created: 6 years ago by: Guest

Jump to the latest result

putImageData

unique fillRect

2 tone fillRect

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):