Benchmark: canvas clearRect vs fillRect vs resize

Script Preparation code:

var width = 2560;
var height = 1300;
var canvas = document.createElement("canvas");
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
document.body.appendChild(canvas);

ctx.fill = 'black';

Tests:

clearRect
ctx.clearRect(0, 0, width, height);
fillRect
ctx.fillRect(0, 0, width, height);
resize
canvas.width = width; canvas.height = height;

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

clearRect

5.6M/s

fillRect

4.6M/s

resize

881K/s

Fastest: clearRect (6.4x faster)

View exact numbers

✓ clearRect: 5,636,995 ops/sec
• fillRect: 4,624,274 ops/sec
• resize: 881,171 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clearRect
fillRect
resize

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/149.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 149 on Android

View result in a separate tab

fillRect

5.1M/s

clearRect

4.7M/s

resize

647K/s

View exact numbers

Test name	Executions per second
✓ fillRect	5,067,161 Ops/sec
clearRect	4,696,125 Ops/sec
resize	647,164 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its components.

**Benchmark Definition**

The benchmark tests the performance of three different approaches on a canvas:

1. `ctx.clearRect(0, 0, width, height);`
2. `ctx.fillRect(0, 0, width, height);`
3. `canvas.width = width; canvas.height = height;`

These methods are used to clear or fill a rectangle within the canvas.

**Options Compared**

The benchmark compares the performance of three different approaches:

1. **`clearRect`**: Clears a rectangle by filling it with a transparent color.
2. **`fillRect`**: Fills a rectangle with a solid color.
3. **`resize`**: Resizes the entire canvas to a new width and height.

**Pros and Cons**

*   `clearRect`: Pros - Fast, efficient; Cons - Only suitable for clearing rectangles with transparent colors.
*   `fillRect`: Pros - Suitable for filling rectangles with any color; Cons - Can be slower than `clearRect` due to the overhead of creating a solid color.
*   `resize`: Pros - Simple and straightforward; Cons - Requires setting new values on the canvas elements, which can be slow.

**Library/Functionality**

None are specific libraries used in this benchmark, but some functionality is implied:

*   The use of 2D context (`ctx`) suggests that the benchmark is running in a web browser, using HTML5 Canvas.
*   The `fill` property on the context object implies that some color values (like black) are being set.

**JavaScript Features**

No specific JavaScript features or syntaxes are used beyond what's implied by the 2D context and canvas manipulation.

**Other Alternatives**

If you were to implement a similar benchmark, consider including additional approaches:

*   Using a graphics library like WebGL
*   Employing pixel-perfect rendering techniques
*   Utilizing GPU acceleration (if possible)
*   Comparing performance with different color modes or alpha values

These alternatives would provide more comprehensive insights into the trade-offs between different canvas operations and potential areas for optimization.

**Benchmark Preparation Code Explanation**

The provided `Script Preparation Code` snippet sets up a new HTML5 Canvas element, creates a 2D drawing context (`ctx`) on it, and appends it to the document body. It also defines the `fill` property on the context object to be `'black'`, setting up the initial canvas settings for the benchmark.

**Individual Test Case Explanation**

Each test case corresponds to a specific benchmark definition:

*   The first test case (`"ctx.clearRect(0, 0, width, height);"`) exercises the clear rectangle operation.
*   The second test case (`"ctx.fillRect(0, 0, width, height);"`) tests the fill rectangle method.
*   The third test case (`"canvas.width = width; canvas.height = height;"`) evaluates the resize operation.

canvas clearRect vs fillRect vs resize (version: 0) Benchmark.js

Testing performance between clearRect and fillRect on a canvas.

Comparing performance of: `clearRect vs fillRect vs resize`

Created: 2 years ago by: Guest

Go to the latest result

clearRect

fillRect

resize

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

canvas clearRect vs fillRect vs resize (version: 0) Benchmark.js

Testing performance between clearRect and fillRect on a canvas.

Comparing performance of: clearRect vs fillRect vs resize

Created: 2 years ago by: Guest

Go to the latest result

clearRect

fillRect

resize

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `clearRect vs fillRect vs resize`