Benchmark: Canvas Rect Performance

Script Preparation code:


var arr = new Array(1000);
for (let i = 0; i < arr.length; ++i) {
  arr[i] = Math.random() * 10;
}
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');

var w = 4;
canvas.width = arr.length * w;
canvas.height = 20;

context.clearRect(0, 0, canvas.width, canvas.height);
context.fillStyle = 'red';

Tests:

fillRect
for (let i = 0; i < arr.length; ++i) { const offset = i * w; context.fillRect(offset, 0, w, arr[i]); }
rect
context.beginPath() for (let i = 0; i < arr.length; ++i) { const offset = i * w; context.rect(offset, 0, w, arr[i]); } context.fill();

Historical Performance Data aggregated from 84 community runs

Desktop Results:

Chrome 74 runs

rect

3K/s

fillRect

521/s

Fastest: rect (5.5x faster)

View exact numbers

✓ rect: 2,858 ops/sec
• fillRect: 521 ops/sec

Firefox 10 runs

rect

6K/s

fillRect

1K/s

Fastest: rect (4.3x faster)

View exact numbers

✓ rect: 5,869 ops/sec
• fillRect: 1,366 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: 10 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:144.0) Gecko/20100101 Firefox/144.0

Browser/OS: Firefox 144 on Mac OS X 10.15

View result in a separate tab

rect

19K/s

fillRect

993/s

View exact numbers

Test name	Executions per second
✓ rect	18,533 Ops/sec
fillRect	993 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**What is being tested?**

The provided JSON benchmark defines two test cases:

1. `fillRect`: This test case measures the performance of filling rectangles using the `fillRect` method.
2. `rect`: This test case measures the performance of drawing and filling rectangles using the `rect` method (followed by a call to `fill`) and the `path` method (used for drawing the rectangle) followed by a call to `fill`.

**Options compared**

In both test cases, the same data is used:

* An array `arr` with 1000 random numbers between 0 and 10.
* A canvas element created and its context obtained.
* The canvas width is set to be an integer multiple of the length of the array (`arr.length * w`), where `w` is a constant value (not shown in the JSON).
* The canvas height is fixed at 20 pixels.

The main difference between the two test cases is:

* In `fillRect`, rectangles are filled using the `fillRect` method.
* In `rect`, rectangles are drawn using the `rect` method and then filled using a call to `fill`.

**Pros and Cons of each approach**

1. **fillRect**:
	* Pros: Simple and efficient, as it only requires calling the `fillRect` method once for each rectangle.
	* Cons: May not be optimized for performance on certain hardware or in specific contexts (e.g., if the rectangles are very large).
2. **rect**:
	* Pros: Can take advantage of hardware acceleration and optimizations for drawing shapes, which may lead to better performance.
	* Cons: Requires an additional call to `fill` to fill the rectangles, which may add overhead.

**Special JS feature or syntax**

In this benchmark, no special JavaScript features or syntax are used that would require specific handling or optimizations. The code is straightforward and standard JavaScript.

**Other alternatives**

If you were to optimize these test cases further, some alternative approaches could be explored:

* Using a different rendering context (e.g., SVG instead of canvas) might provide better performance for certain operations.
* Using Web Workers or other parallel execution mechanisms could potentially speed up the tests by running each frame of animation in parallel.
* Optimizing the canvas element and its context could also lead to improved performance, such as by reducing the number of times the context is cleared.

However, without more specific knowledge of the target hardware and use case, it's difficult to predict which approach would be most beneficial.

Canvas Rect Performance (version: 0) Benchmark.js

fillRect() vs Path rect()

Comparing performance of: `fillRect vs rect`

Created: 4 years ago by: Guest

Go to the latest result

fillRect

rect

Historical Performance Data aggregated from 84 community runs

Desktop Results:

Chrome 74 runs

Firefox 10 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 Rect Performance (version: 0) Benchmark.js

fillRect() vs Path rect()

Comparing performance of: fillRect vs rect

Created: 4 years ago by: Guest

Go to the latest result

fillRect

rect

Historical Performance Data aggregated from 84 community runs

Desktop Results:

Chrome 74 runs

Firefox 10 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`