Benchmark: Canvas filling test

HTML Preparation code:

<canvas id="canvasM" data-pixel-ratio="2" style="position:relative; z-index:0;"></canvas>

Script Preparation code:

var canvas = document.getElementById('canvasM');
let ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const xMult = 255 / canvas.width
const yMult = 255 / canvas.height

Tests:

Gradient literal
for(let x = 0; x<canvas.width;x++){ for(let y = 0; y < canvas.height; y++){ ctx.fillStyle = `rgb(${x*xMult},${y*yMult},0)` ctx.fillRect(x,y,1,1) } }
gradient literal 2
for(let x = 0; x<canvas.width;x++){ for(let y = 0; y < canvas.height; y++){ ctx.fillStyle = `rgb(${x*xMult},${y*yMult},0)` ctx.fillRect(x,y,1,1) } }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Gradient literal
gradient literal 2

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; CrOS x86_64 14541.0.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Chrome OS 14541.0.0

View result in a separate tab

Test name	Executions per second
Gradient literal	14.8 Ops/sec
gradient literal 2	14.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):

LLMs can make mistakes. Check important info.

The benchmark "Canvas filling test" is designed to evaluate the performance of rendering a gradient on an HTML canvas using JavaScript. Specifically, it uses the 2D rendering context of the canvas to fill it with colors based on pixel coordinates.

### Test Options and Comparison

Two test cases have been defined in the benchmark, both of which use the same method for filling the canvas:

1. **Gradient literal**
2. **Gradient literal 2**

Although both test cases appear identical in terms of the benchmark definition provided, the slight difference in naming indicates that they may be testing different underlying conditions, library settings, or may simply serve as a placeholder for future variations.

### Pros and Cons of the Approach

**Pros:**
- **Visual Output**: Using the canvas provides a clear and visual output, which is useful for assessing rendering performance.
- **Granular Control**: The 2D context allows for fine control over individual pixel rendering, enabling a variety of graphical applications.

**Cons:**
- **Performance Limits**: Rendering each pixel individually (using `ctx.fillRect` in a nested loop) can be slow, especially on larger canvases as this approach doesn't take full advantage of potential performance optimizations in browser rendering engines.
- **JavaScript Overhead**: Each call to `fillRect` incurs JavaScript execution overhead and browser context shifts, which could lead to inefficiencies.

### Library Information

The benchmark uses the native **Canvas API**, which is built into HTML5. This API is essential for rendering graphics and providing a drawing surface within web applications. The API allows developers to draw and manipulate images and graphics dynamically through JavaScript.

### JavaScript Features Used

1. **Template Literals**: The benchmark uses template literals (enclosed in backticks `` ` ``) for string interpolation to create the RGB color string. This feature is part of ES6 and allows for easier string construction, especially when including variables directly inside the string.

Example:
    ```javascript
    ctx.fillStyle = `rgb(${x*xMult},${y*yMult},0)`;
    ```

### Alternative Approaches

In addition to the method used in this benchmark (directly rendering each pixel with nested loops), other options for filling a canvas could include:

- **Batch Processing**: Rather than drawing each pixel individually, you could create an ImageData object to represent a collection of pixels and then use `putImageData` to fill the canvas in bulk. This method is much more efficient for large canvases as it reduces the number of context drawing calls.

Example:
    ```javascript
    let imageData = ctx.createImageData(canvas.width, canvas.height);
    let data = imageData.data;

for (let x = 0; x < canvas.width; x++) {
        for (let y = 0; y < canvas.height; y++) {
            let idx = (x + y * canvas.width) * 4;
            data[idx] = x * xMult;       // Red
            data[idx + 1] = y * yMult;   // Green
            data[idx + 2] = 0;            // Blue
            data[idx + 3] = 255;          // Alpha
        }
    }

ctx.putImageData(imageData, 0, 0);
    ```

- **WebGL**: For more complex graphics and better performance, WebGL can be used to leverage GPU acceleration. It enables rendering high-performance interactive graphics in web applications, handling thousands or millions of primitives with greater efficiency than the Canvas API.

In conclusion, this benchmark highlights the efficiency of rendering operations within a canvas, particularly focusing on pixel manipulation and color filling techniques while evaluating performance implications of the chosen approach. It can help developers understand the trade-offs between direct pixel manipulation and more efficient rendering strategies.

Related benchmarks:

Canvas filling test (version: 1)

Comparing performance of: Gradient literal vs gradient literal 2

Created: 3 months ago by: Guest

Jump to the latest result

Gradient literal

gradient literal 2

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):