Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
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:
one year ago
by:
Registered User
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:
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>
Run tests (2)
Previous results
Fork
Test case name
Result
roundRect
fillRect
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
3 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
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=627822" width="100%" height="500px"></iframe>
roundRect
2.1M/s
fillRect
1.3M/s
View exact numbers
Test name
Executions per second
✓
roundRect
2,144,601 Ops/sec
fillRect
1,331,588 Ops/sec
Autogenerated LLM Summary
(model
gpt-4o-mini
, generated one year ago):
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
canvasperf
Canvas roundrect perf
canvas clearRect vs fillRect
Canvas roundrect perf comparison check
Roundrect perf comparison check
Normal Line vs Rectangle Line
Comments
Confirm delete:
Do you really want to delete benchmark?