Benchmark: Canvas test - MeasureThat.net

HTML Preparation code:

<canvas id="canvas"></canvas>

Tests:

fillRect
var ctx = document.getElementById('canvas').getContext('2d'); ctx.fillRect(0, 0, 500, 500);
clearRect
var ctx = document.getElementById('canvas').getContext('2d'); ctx.clearRect(0, 0, 500, 500)

Historical Performance Data aggregated from 88 community runs

Desktop Results:

Chrome 41 runs

fillRect

1.5M/s

clearRect

1.4M/s

View exact numbers

✓ fillRect: 1,491,305 ops/sec
• clearRect: 1,391,714 ops/sec

Firefox 35 runs

clearRect

2.0M/s

fillRect

1.5M/s

Fastest: clearRect (1.4x faster)

View exact numbers

✓ clearRect: 2,043,001 ops/sec
• fillRect: 1,495,498 ops/sec

Safari 5 runs

clearRect

254K/s

fillRect

21K/s

Fastest: clearRect (12.1x faster)

View exact numbers

✓ clearRect: 253,780 ops/sec
• fillRect: 20,926 ops/sec

Mobile Results:

Chrome 7 runs

fillRect

367K/s

clearRect

235K/s

Fastest: fillRect (1.6x faster)

View exact numbers

✓ fillRect: 367,271 ops/sec
• clearRect: 234,819 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
clearRect

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 152 on Windows

View result in a separate tab

fillRect

1.8M/s

clearRect

409K/s

View exact numbers

Test name	Executions per second
✓ fillRect	1,841,724 Ops/sec
clearRect	409,483 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 MeasureThat.net and explore what's being tested in this benchmark.

**What is being tested?**

The provided JSON represents two individual test cases, each measuring the performance of a specific JavaScript function: `fillRect` and `clearRect`. The `fillRect` function draws a rectangle on a 2D context using the HTML5 `<canvas>` element, while `clearRect` clears a rectangular area within the same context.

**Options being compared**

The two test cases differ in their approach to drawing or clearing the rectangle:

1. **fillRect**: This test case creates a new 2D context for each execution and draws a full-rectangle using the `fillRect` method.
2. **clearRect**: In contrast, this test case also creates a new 2D context but uses the `clearRect` method to clear a smaller rectangular area within that context.

**Pros and Cons of each approach:**

* **fillRect**:
	+ Pros:
		- Simulates real-world usage of drawing rectangles.
		- Encourages proper use of contexts and methods for efficient rendering.
	+ Cons:
		- Creates an extra context object, which might lead to unnecessary memory allocation and garbage collection.
		- May not accurately represent the actual performance difference between `fillRect` and `clearRect`.
* **clearRect**:
	+ Pros:
		- Reduces memory overhead by reusing contexts for both drawing and clearing.
		- Potentially more accurate representation of real-world usage, as it simulates clearing a smaller rectangular area within an existing context.
	+ Cons:
		- May not accurately represent the performance difference between `fillRect` and `clearRect`, as the clearing process is often less computationally intensive.

**Library and its purpose**

In this benchmark, no libraries are explicitly mentioned. However, it's worth noting that MeasureThat.net might use some internal libraries or frameworks for rendering, caching, or other optimization techniques to enhance performance measurement accuracy.

**Special JS feature or syntax (not applicable in this case)**

No special JavaScript features or syntax are being tested in this benchmark. The focus is on the simple drawing and clearing operations using the `fillRect` and `clearRect` methods.

**Alternative approaches**

If you were interested in exploring alternative benchmarks, here are a few ideas:

* Measure the performance of different rendering engines (e.g., WebGL vs. Canvas).
* Compare the performance of various algorithms for calculating bounding rectangles or clipping paths.
* Investigate the impact of caching or memoization on benchmark results.

Keep in mind that these alternatives would likely require significant changes to the existing benchmark structure and might introduce additional complexity.

Canvas test (version: 0) Benchmark.js

test

Comparing performance of: `fillRect vs clearRect`

Created: 5 years ago by: Guest

Go to the latest result

fillRect

clearRect

Historical Performance Data aggregated from 88 community runs

Desktop Results:

Chrome 41 runs

Firefox 35 runs

Safari 5 runs

Mobile Results:

Chrome 7 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 test (version: 0) Benchmark.js

test

Comparing performance of: fillRect vs clearRect

Created: 5 years ago by: Guest

Go to the latest result

fillRect

clearRect

Historical Performance Data aggregated from 88 community runs

Desktop Results:

Chrome 41 runs

Firefox 35 runs

Safari 5 runs

Mobile Results:

Chrome 7 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 clearRect`