Benchmark: canvas clearRect vs fillRect

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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clearRect
fillRect

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser/OS: Chrome 135 on Windows

View result in a separate tab

Test name	Executions per second
clearRect	4336164.0 Ops/sec
fillRect	2008746.1 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is being tested?**

The provided JSON represents a benchmark test case for comparing the performance of two drawing methods in HTML5 canvas: `clearRect` and `fillRect`. The test creates a new canvas element with a specific width and height, sets up a 2D drawing context, and then uses these two methods to draw a full black rectangle on the canvas.

**Options being compared**

The two options being compared are:

1. **`clearRect`**: This method clears the contents of the specified rectangular area in the current drawing target. It is typically used when you need to redraw an entire area, such as when scrolling or resizing a canvas.
2. **`fillRect`**: This method fills the specified rectangular area with the specified color. It is typically used for drawing shapes and filling areas.

**Pros and Cons**

* `clearRect` has the advantage of being more efficient when you need to redraw an entire area, as it avoids the overhead of filling each pixel individually. However, it can be slower than `fillRect` when only a small portion of the canvas needs to be updated.
* `fillRect`, on the other hand, is faster for small updates, but can be slower overall due to the overhead of filling each pixel.

**Other considerations**

When choosing between these two methods, consider the specific use case:

* If you need to redraw an entire area at once (e.g., when scrolling or resizing a canvas), `clearRect` might be a better choice.
* If you're only updating a small portion of the canvas, `fillRect` could be faster.

**Library and purpose**

None are explicitly mentioned in this benchmark definition. However, it's worth noting that both `clearRect` and `fillRect` are built-in methods of the 2D drawing context in HTML5 canvas.

**Special JS feature or syntax**

None are specifically highlighted in this example. The focus is on comparing two common drawing methods.

**Other alternatives**

If you're interested in exploring alternative approaches, here are a few:

* Using WebGL (Web Graphics Library) instead of canvas for graphics rendering.
* Comparing the performance of other drawing libraries like Fabric.js or Konva.js.
* Investigating the performance of different color modes or pixel formats (e.g., RGBA vs. RGB).

These alternatives would require more specific benchmarking and testing to determine their relative performance in various scenarios.

That's a summary of this benchmark!

Related benchmarks:

canvas clearRect vs fillRect (version: 0)

Testing performance between clearRect and fillRect on a canvas.

Comparing performance of: clearRect vs fillRect

Created: 2 years ago by: Registered User

Jump to the latest result

clearRect

fillRect

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):