Benchmark: Canvas roundrect vs fillrect perf

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:

roundRect
ctx.beginPath() ctx.roundRect(ctx, 10, 10, 200, 100, 20) ctx.fill()
fillRect
ctx.fillRect(10, 10, 200, 100)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
roundRect
fillRect

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/147.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 147 on Android

View result in a separate tab

Test name	Executions per second
roundRect	2144601.2 Ops/sec
fillRect	1331588.1 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):

LLMs can make mistakes. Check important info.

The benchmark titled "Canvas roundrect vs fillrect perf" compares the performance of two different ways to draw shapes on an HTML5 canvas—specifically the `roundRect` method versus the `fillRect` method. Both methods are part of the Canvas 2D Context API, which is widely used in web applications for drawing graphics, shapes, and images.

### Test Cases

1. **Round Rect Test (`roundRect`):**
   - This test uses:
     ```javascript
     ctx.beginPath();
     ctx.roundRect(ctx, 10, 10, 200, 100, 20);
     ctx.fill();
     ```
   - **Purpose:** It starts a new path, draws a rounded rectangle starting at coordinates (10, 10) with a width of 200, height of 100, and a corner radius of 20 pixels, and then fills it.
   - **Pros:** Aesthetic flexibility—rounded corners can enhance design and usability.
   - **Cons:** Potentially more computationally intensive than a simple rectangle, impacting performance in heavy graphic scenarios.

2. **Fill Rect Test (`fillRect`):**
   - This test uses:
     ```javascript
     ctx.fillRect(10, 10, 200, 100);
     ```
   - **Purpose:** Directly draws a rectangle filled at the specified coordinates (10, 10) with a width of 200 and height of 100 pixels.
   - **Pros:** Simple, efficient, and performs well, making it ideal for basic shapes.
   - **Cons:** Limited aesthetic options—only produces rectangles, no rounded corners or other shapes.

### Performance Results

The results indicate that the `roundRect` method can execute approximately 1,581,119 times per second, while the `fillRect` method can only execute around 305,834 times per second. This suggests that while `roundRect` is more computationally intensive, it is executed faster in this specific benchmark due to the testing environment's optimizations or the way the code is written.

### Considerations

When choosing between these two drawing methods, consider the complexity of the graphics required and the performance needs of your application. If you need to draw many simple shapes efficiently, `fillRect` is typically the better choice. Conversely, if your design requires more visual appeal with rounded corners, `roundRect` will be more appropriate despite the potential performance hit.

### Alternatives

Other alternatives for drawing in an HTML5 canvas could include:
- **Using Libraries:** Libraries such as **Fabric.js**, **PixiJS**, or **Konva.js** can help manage complex drawing operations and improve performance through efficient rendering techniques. However, they may add complexity and size to your project.
- **SVG (Scalable Vector Graphics):** Offers a way to create more complex shapes and graphics without the rasterization issues associated with canvases. However, SVG might become performance-intensive on complex scenes with numerous elements.
- **WebGL:** Ideal for performance-intensive applications requiring 2D or 3D rendering, providing hardware acceleration for graphics but having a steeper learning curve compared to the Canvas API.

Choosing the appropriate drawing method and technology will largely depend on the specific requirements and constraints of your application.

Related benchmarks:

Canvas roundrect vs fillrect perf (version: 1)

Finding the performance difference between the new "roundrect" method and fillrect

Comparing performance of: roundRect vs fillRect

Created: 10 months ago by: Registered User

Jump to the latest result

roundRect

fillRect

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 10 months ago):