Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Roundrect perf comparison check
(version: 0)
Benchmark.js
Comparing performance of:
Custom roundRect vs roundRect vs rect
Created:
2 years ago
by:
Guest
Go to the latest result
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>
Run tests (3)
Previous results
Fork
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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=521709" width="100%" height="500px"></iframe>
Custom roundRect
1.6M/s
rect
391K/s
roundRect
303K/s
View exact numbers
Test name
Executions per second
✓
Custom roundRect
1,611,316 Ops/sec
rect
391,317 Ops/sec
roundRect
302,529 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
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
rgb vs rgba vs hex canvas
rgb vs rgba (1 & 0.5) vs hex canvas
Canvas roundrect perf
Canvas roundrect perf comparison check
Comments
Confirm delete:
Do you really want to delete benchmark?