Benchmark: fillRect vs rect

HTML Preparation code:

<canvas width="500" height="500"></canvas>

Script Preparation code:

var ctx = document.querySelector('canvas').getContext('2d');

Tests:

fillRect
ctx.fillStyle = '#'+(Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0'); ctx.fillRect(Math.random() * 500, Math.random() * 500, Math.random() * 50, Math.random() * 50);
rect
ctx.beginPath(); ctx.rect(Math.random() * 500, Math.random() * 500, Math.random() * 50, Math.random() * 50); ctx.fillStyle = '#'+(Math.random() * 0xFFFFFF << 0).toString(16).padStart(6, '0'); ctx.fill();

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 6 runs

fillRect

746K/s

rect

590K/s

Fastest: fillRect (1.3x faster)

View exact numbers

✓ fillRect: 746,000 ops/sec
• rect: 590,498 ops/sec

Firefox 5 runs

fillRect

1.5M/s

rect

933K/s

Fastest: fillRect (1.6x faster)

View exact numbers

✓ fillRect: 1,518,275 ops/sec
• rect: 932,754 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
fillRect
rect

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:115.0) Gecko/20100101 Goanna/6.7 Firefox/115.0 PaleMoon/33.7.2

Browser/OS: Pale Moon (Firefox Variant) 33 on Windows

View result in a separate tab

fillRect

533K/s

rect

187K/s

View exact numbers

Test name	Executions per second
✓ fillRect	532,650 Ops/sec
rect	187,274 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 definition and test cases to understand what is being tested.

**Benchmark Definition**

The benchmark is comparing two approaches: `fillRect` and `rect`. The goal of this benchmark is likely to determine which method is faster, more efficient, or more suitable for a specific use case.

**Options Compared**

Two options are compared:

1. **fillRect**: This approach uses the `fillStyle` property to set the fill color, followed by a call to `fillRect()` to draw the rectangle.
2. **rect**: This approach uses the `beginPath()` and `rect()` methods to define the rectangle's outline, followed by a call to `fill()` to fill the rectangle.

**Pros and Cons of Each Approach**

1. **fillRect**:
	* Pros: Can be more intuitive for developers who are familiar with canvas drawing.
	* Cons: May require additional setup (e.g., setting fill color) before calling `fillRect()`.
2. **rect**:
	* Pros: Can provide better control over the rectangle's outline and can be more efficient in terms of draw calls.
	* Cons: Requires an extra step to define the rectangle's outline using `beginPath()` and `rect()`.

**Library Used**

In this benchmark, the canvas 2D context library is used. The `getContext('2d')` method returns a reference to the 2D drawing context of an HTML canvas element.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntaxes being tested in this benchmark.

**Other Considerations**

When writing benchmarks, it's essential to consider factors such as:

* **Repeatability**: Can the results be reproduced consistently?
* **Warm-up**: Are there any initialization steps that need to be taken before running the benchmark?
* **Interpretation**: What does a high or low execution rate mean for this specific use case?

**Alternatives**

Other alternatives for similar benchmarks could include:

* Comparing different drawing APIs, such as SVG or WebGL.
* Testing the performance of various rendering engines, like Chromium or Blink.
* Evaluating the impact of different optimization techniques on canvas-based rendering.

In terms of alternative benchmark scripts, the provided `Script Preparation Code` and `Html Preparation Code` can be modified to test different scenarios, such as:

* Drawing multiple shapes simultaneously
* Using different fill styles or colors
* Simulating user interactions (e.g., mouse movements or clicks)

The choice of benchmark script and HTML preparation code will depend on the specific requirements and goals of the comparison.

fillRect vs rect (version: 0) Benchmark.js

Comparing performance of: `fillRect vs rect`

Created: 3 years ago by: Guest

Go to the latest result

fillRect

rect

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 6 runs

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

fillRect vs rect (version: 0) Benchmark.js

Comparing performance of: fillRect vs rect

Created: 3 years ago by: Guest

Go to the latest result

fillRect

rect

Historical Performance Data aggregated from 11 community runs

Desktop Results:

Chrome 6 runs

Firefox 5 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: `fillRect vs rect`