Benchmark: Roundrect perf comparison check

HTML Preparation code:

<canvas id="canvas1" width="512" height="512"></canvas>

<style>
 canvas { border: 1px solid black; }
</style>

<script>
var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

</script>

Tests:

Custom roundRect
function roundRect(canvas, x, y, w, h, r) { if (w < 2 * r) r = Math.round(w / 2); if (h < 2 * r) r = Math.round(h / 2); canvas.beginPath(); canvas.moveTo(x + r, y); canvas.arcTo(x + w, y, x + w, y + h, r); canvas.arcTo(x + w, y + h, x, y + h, r); canvas.arcTo(x, y + h, x, y, r); canvas.arcTo(x, y, x + w, y, r); canvas.closePath(); } roundRect(ctx, 10, 10, 200, 100, 20);
roundRect
ctx.beginPath(); ctx.roundRect(10, 10, 200, 100, 20); ctx.stroke();
rect
ctx.beginPath(); ctx.rect(10, 10, 200, 100); ctx.stroke();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Custom roundRect
roundRect
rect

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 124 on Windows

View result in a separate tab

Test name	Executions per second
Custom roundRect	1611315.6 Ops/sec
roundRect	302529.3 Ops/sec
rect	391317.4 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 benchmark and its components.

**Benchmark Definition**

The benchmark is defined by a JSON object that contains several properties:

* `Name`: The name of the benchmark, which is "Roundrect perf comparison check".
* `Description`: An empty string, indicating no description for this benchmark.
* `Script Preparation Code`: A code snippet that prepares the HTML and JavaScript environment. It creates a canvas element and sets up the 2D drawing context (`ctx`).
* `Html Preparation Code`: The HTML code itself, which includes a canvas element with a width and height of 512 pixels.

The purpose of this benchmark is to compare the performance of three different approaches for drawing rounded rectangles:

1. A custom implementation using the `roundRect` function.
2. A built-in method (`ctx.roundRect`) on the drawing context.
3. A simple rectangle drawing approach using `ctx.rect`.

**Individual Test Cases**

The benchmark defines three test cases, each with its own `Benchmark Definition` code snippet. Let's analyze each test case:

1. **Custom roundRect**
This test case uses a custom implementation of the rounded rectangle drawing function (`roundRect`). The function takes five arguments: `canvas`, `x`, `y`, `w`, and `h`. It calculates the radius (`r`) based on the width and height, and then draws the rounded rectangle using various arcs.
2. **roundRect**
This test case uses the built-in method (`ctx.roundRect`) on the drawing context to draw a rounded rectangle. The method takes four arguments: `x`, `y`, `w`, and `r`. It calculates the corner radius automatically based on the width and height.
3. **rect**
This test case uses a simple rectangle drawing approach using `ctx.rect`. This method takes two arguments: `x` and `y`. It draws a filled or stroked rectangle, depending on the context.

**Library Used**

None of the test cases use any external libraries.

**Special JS Features or Syntax**

* The benchmark uses JavaScript's 2D drawing context (`ctx`) to draw the rounded rectangles.
* The built-in method (`ctx.roundRect`) is used in the second test case. This method is part of the HTML5 Canvas API.

**Pros and Cons of Each Approach**

Here are some pros and cons for each approach:

1. **Custom roundRect**
Pros:
	+ Can be optimized for specific use cases.
	+ May provide more control over the drawing process.
Cons:
	+ Requires manual calculations for corner radius.
	+ May not be as efficient as built-in methods.
2. **roundRect**
Pros:
	+ Convenient and easy to use.
	+ Built-in method is likely optimized for performance.
Cons:
	+ May not provide complete control over the drawing process.
	+ Could have limitations or quirks due to the browser's implementation.
3. **rect**
Pros:
	+ Simple and easy to understand.
	+ No need to worry about corner radius calculations.
Cons:
	+ Not specifically designed for rounded rectangles, which may lead to inaccuracies.

**Alternatives**

If you want to benchmark different approaches for drawing rounded rectangles, you could consider adding additional test cases, such as:

* Using a third-party library like Paper.js or Konva.js
* Implementing a custom corner radius calculation using trigonometry
* Using a different drawing context, like WebGL

Keep in mind that each alternative will require significant changes to the benchmark code and may not be suitable for all use cases.

Related benchmarks:

Roundrect perf comparison check (version: 0)

Comparing performance of: Custom roundRect vs roundRect vs rect

Created: 2 years ago by: Guest

Jump to the latest result

Custom roundRect

roundRect

rect

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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