Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Canvas Rect Performance
(version: 0)
fillRect() vs Path rect()
Comparing performance of:
fillRect vs rect
Created:
4 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var arr = new Array(1000); for (let i = 0; i < arr.length; ++i) { arr[i] = Math.random() * 10; } var canvas = document.createElement('canvas'); var context = canvas.getContext('2d'); var w = 4; canvas.width = arr.length * w; canvas.height = 20; context.clearRect(0, 0, canvas.width, canvas.height); context.fillStyle = 'red';
Tests:
fillRect
for (let i = 0; i < arr.length; ++i) { const offset = i * w; context.fillRect(offset, 0, w, arr[i]); }
rect
context.beginPath() for (let i = 0; i < arr.length; ++i) { const offset = i * w; context.rect(offset, 0, w, arr[i]); } context.fill();
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
fillRect
rect
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
6 months ago
)
User agent:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:144.0) Gecko/20100101 Firefox/144.0
Browser/OS:
Firefox 144 on Mac OS X 10.15
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
fillRect
993.1 Ops/sec
rect
18533.2 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net. **What is being tested?** The provided JSON benchmark defines two test cases: 1. `fillRect`: This test case measures the performance of filling rectangles using the `fillRect` method. 2. `rect`: This test case measures the performance of drawing and filling rectangles using the `rect` method (followed by a call to `fill`) and the `path` method (used for drawing the rectangle) followed by a call to `fill`. **Options compared** In both test cases, the same data is used: * An array `arr` with 1000 random numbers between 0 and 10. * A canvas element created and its context obtained. * The canvas width is set to be an integer multiple of the length of the array (`arr.length * w`), where `w` is a constant value (not shown in the JSON). * The canvas height is fixed at 20 pixels. The main difference between the two test cases is: * In `fillRect`, rectangles are filled using the `fillRect` method. * In `rect`, rectangles are drawn using the `rect` method and then filled using a call to `fill`. **Pros and Cons of each approach** 1. **fillRect**: * Pros: Simple and efficient, as it only requires calling the `fillRect` method once for each rectangle. * Cons: May not be optimized for performance on certain hardware or in specific contexts (e.g., if the rectangles are very large). 2. **rect**: * Pros: Can take advantage of hardware acceleration and optimizations for drawing shapes, which may lead to better performance. * Cons: Requires an additional call to `fill` to fill the rectangles, which may add overhead. **Special JS feature or syntax** In this benchmark, no special JavaScript features or syntax are used that would require specific handling or optimizations. The code is straightforward and standard JavaScript. **Other alternatives** If you were to optimize these test cases further, some alternative approaches could be explored: * Using a different rendering context (e.g., SVG instead of canvas) might provide better performance for certain operations. * Using Web Workers or other parallel execution mechanisms could potentially speed up the tests by running each frame of animation in parallel. * Optimizing the canvas element and its context could also lead to improved performance, such as by reducing the number of times the context is cleared. However, without more specific knowledge of the target hardware and use case, it's difficult to predict which approach would be most beneficial.
Related benchmarks:
fill array with value: map(callback) vs fill(value)
fill vs map
Array fill method vs for loop
fill vs manual fill
fill array with value: map(callback) vs fill(value) 2
Comments
Confirm delete:
Do you really want to delete benchmark?