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;

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: one month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.5 Safari/605.1.15

Browser/OS: Safari 26 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
clearRect	195104.9 Ops/sec
fillRect	178238.6 Ops/sec
resize	32839.5 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.

Related benchmarks:

canvas clearRect vs fillRect vs resize (version: 0)

Testing performance between clearRect and fillRect on a canvas.

Comparing performance of: clearRect vs fillRect vs resize

Created: 2 years ago by: Guest

Jump to the latest result

clearRect

fillRect

resize

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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