Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
Feature Requests
FAQ
Register
Log In
Canvas roundrect perf comparison check
(version: 0)
Benchmark.js
Comparing performance of:
Own 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:
Own 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.roundRect(10, 10, 200, 100, 20);
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
Own roundRect
roundRect
rect
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0
Browser/OS:
Chrome 134 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=593968" width="100%" height="500px"></iframe>
Own roundRect
1.9M/s
roundRect
1.7M/s
rect
988K/s
View exact numbers
Test name
Executions per second
✓
Own roundRect
1,926,170 Ops/sec
roundRect
1,690,862 Ops/sec
rect
987,617 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Overview of the Benchmark** The provided JSON represents a JavaScript microbenchmarking test, specifically comparing the performance of three different approaches to drawing a rounded rectangle on a canvas element. **Options Compared:** 1. **`ctx.roundRect(10, 10, 200, 100, 20);`**: This is the built-in method for drawing a rounded rectangle using the `CanvasRenderingContext2D` API. 2. **Own implementation of `roundRect`**: A custom function that draws a rounded rectangle from scratch, without relying on any browser-provided methods. 3. **`ctx.beginPath(); ctx.rect(10, 10, 200, 100); ctx.stroke();`**: This approach uses the `CanvasRenderingContext2D` API to draw a rectangle and then manually drawing the rounded corners using the `arcTo()` method. **Pros and Cons of Each Approach:** 1. **Built-in `ctx.roundRect(10, 10, 200, 100, 20);`**: * Pros: Faster execution time, as it leverages the browser's optimized rendering engine. * Cons: Less control over the drawing process, and may not work consistently across all browsers. 2. **Own implementation of `roundRect`**: * Pros: More control over the drawing process, and can be optimized for performance. * Cons: Slower execution time, as it involves manual calculations and rendering. 3. **`ctx.beginPath(); ctx.rect(10, 10, 200, 100); ctx.stroke();`**: * Pros: Can provide more control over the drawing process, especially when using multiple corners or complex shapes. * Cons: Slower execution time, as it involves manual calculations and rendering. **Library Used:** There is no explicit library mentioned in the provided JSON. However, the `CanvasRenderingContext2D` API is a part of the Web API, which provides a standardized interface for interacting with canvas elements in web browsers. **Special JS Feature/Syntax:** None are explicitly mentioned in this benchmark. **Other Considerations:** When creating benchmarks like this, it's essential to consider factors such as: * Platform compatibility: Ensure that the test runs consistently across different operating systems and devices. * Browser version support: Test the benchmark on multiple browser versions to ensure that the results are reliable. * Optimizations: Regularly optimize the benchmark code for performance improvements. **Alternatives:** Other alternatives for measuring JavaScript performance include: 1. **Benchmarking libraries**: Tools like Benchmark.js, Microbenchmark, or js-benchmark provide a structured approach to writing benchmarks and can help with analysis and comparison of results. 2. **Performance profiling tools**: Browser developer tools (e.g., Chrome DevTools) or external tools like Perf or WebPageTest can provide detailed insights into the performance characteristics of JavaScript code. Keep in mind that each benchmarking approach has its strengths and weaknesses, and choosing the right tool depends on your specific needs and goals.
Related benchmarks
rgb vs rgba vs hex canvas
rgb vs rgba (1 & 0.5) vs hex canvas
RGB vs RGBa vs HSL vs Hex using Canvas v2
Comments
Confirm delete:
Do you really want to delete benchmark?