Benchmark: Large Canvas Performance Test

HTML Preparation code:

<canvas id="c" width="5000" height="5000"></canvas>

Script Preparation code:

$c = document.getElementById('c');
$ctx = $c.getContext('2d');
$ctx.clearRect(0, 0, 5000, 5000);
$px = $ctx.createImageData(1, 1);
$pxls = [];
for (var i=0; i<10000; ++i) $pxls.push({
   x: Math.random() * 5000 << 0,
   y: Math.random() * 5000 << 0,
   r: Math.random() * 255 << 0,
   g: Math.random() * 255 << 0,
   b: Math.random() * 255 << 0,
   a: Math.random() * 128 << 0 + 128
});
$i = 0;

Tests:

fillRect
for (var i=500;i--;){ var px = $pxls[$i++ % 10000]; $ctx.fillStyle = 'rgba(' + px.r + ',' + px.g + ',' + px.b + ',' + (px.a / 255) + ')'; $ctx.fillRect(px.x, px.y, 1, 1); }
putImage
var image = $ctx.createImageData($c.width, $c.height); for (var i=500;i--;){ var px=$pxls[$i++ % 10000], d=$px.data; var _pidx = i * 4; image.data[_pidx] = px.r; image.data[_pidx+1] = px.g; image.data[_pidx+2] = px.b; image.data[_pidx+3] = px.a; } $ctx.putImageData(image, 0, 0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
fillRect
putImage

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser/OS: Chrome 127 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
fillRect	1837.2 Ops/sec
putImage	30.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Measuring JavaScript performance can be quite fascinating.

The provided JSON represents two benchmark test cases: `fillRect` and `putImage`. Both tests aim to measure the performance of filling a large canvas using different methods.

**fillRect Test Case**

In this test case, the script uses the `fillRect` method from the 2D drawing context (`$ctx`). It loops through an array of 10,000 pixels, generating random RGB values for each pixel. The script then draws a rectangle on the canvas with dimensions 1x1 at each pixel's coordinates.

**putImage Test Case**

In this test case, the script uses the `putImageData` method to draw images onto the canvas. It creates an image data object, populates its pixels with the same random RGB values as in the `fillRect` test, and then draws the image onto the canvas at the top-left corner.

**Comparison of Options**

The two tests compare the performance of:

1.  `fillRect`: This method uses a simple, direct approach to draw rectangles on the canvas. It's likely to be faster since it only requires updating the drawing context with minimal data.
2.  `putImageData`: This method involves creating an image data object, populating its pixels with color values, and then drawing the entire image onto the canvas using the `putImageData` method. This approach can be slower because it requires more memory accesses and calculations.

**Pros and Cons of Each Approach**

*   **fillRect**
    *   Pros:
        +   Faster performance due to minimal data updates
        +   Less memory usage compared to creating an image data object
    *   Cons:
        +   May not be as efficient for large images or complex graphics
        +   Requires manual calculations for each pixel's position and color
*   **putImageData**
    *   Pros:
        +   Can handle larger images and more complex graphics without significant performance impact
        +   Eliminates the need for manual calculations, making it easier to work with
    *   Cons:
        +   Generally slower due to increased memory accesses and calculations
        +   Requires creating an additional image data object

**Other Considerations**

*   **Browser Support**: Both tests use standard Web API methods (`fillRect` and `putImageData`) that are widely supported across modern browsers. However, browser implementation optimizations might affect performance differences.
*   **Cache and Memory Usage**: The `putImageData` method can lead to higher memory usage due to the creation of an image data object. In contrast, the `fillRect` method updates the drawing context directly, which may have a lower memory footprint.

**Library Usage**

In both tests, no external libraries are used. The scripts rely solely on the Web API methods provided by modern browsers.

**Special JS Features or Syntax**

There are no special JavaScript features or syntax mentioned in the tests. Both tests utilize standard ES6 JavaScript and 2D drawing context APIs.

**Alternatives**

For measuring performance differences between these two approaches, you can try:

1.  Using a testing framework like Jest or Mocha to create multiple iterations of each test case.
2.  Utilizing hardware acceleration (e.g., WebGL) for more precise measurements.
3.  Comparing performance with different browser versions, operating systems, or devices to account for varying platform-specific optimizations.

Feel free to ask if you'd like further clarification on any point!

Related benchmarks:

Large Canvas Performance Test (version: 0)

Comparing performance of: fillRect vs putImage on large canvas

Comparing performance of: fillRect vs putImage

Created: one year ago by: Guest

Jump to the latest result

fillRect

putImage

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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