Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Setting multiple canvas pixels
(version: 0)
Comparing performance of:
FillRect vs PutImageData
Created:
2 years ago
by:
Guest
Jump to the latest result
HTML Preparation code:
<canvas id="c" width="800" height="1"></canvas>
Script Preparation code:
$N = 800; $c = document.getElementById('c'); $ctx = c.getContext('2d'); $ctx.clearRect(0, 0, $N, 1); $pxls = []; for (let i = 0; i < $N; ++i) { $pxls.push({ r: Math.random() * 255 << 0, g: Math.random() * 255 << 0, b: Math.random() * 255 << 0 }); }
Tests:
FillRect
for (let i = 0; i < $N; i++) { let px = $pxls[i]; $ctx.fillStyle = 'rgb(' + px.r + ',' + px.g + ',' + px.b + ')'; $ctx.fillRect(i, 0, 1, 1); }
PutImageData
const imageData = $ctx.createImageData($N, 1); const data = imageData.data; for (let i = 0; i < $N; i++) { let px = $pxls[i]; data[i * $N * 4 + 0] = px.r; data[i * $N * 4 + 1] = px.g; data[i * $N * 4 + 2] = px.b; data[i * $N * 4 + 3] = 255; } $ctx.putImageData(imageData, 0, 0);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
FillRect
PutImageData
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
9 months ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:141.0) Gecko/20100101 Firefox/141.0
Browser/OS:
Firefox 141 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
FillRect
849.9 Ops/sec
PutImageData
102967.2 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**What is being tested?** On the provided JSON, we have two test cases: "FillRect" and "PutImageData". These test cases are designed to measure the performance of filling pixels on an HTML canvas element using JavaScript. In general, these tests aim to compare the speed of two different approaches: 1. **FillRect**: This approach uses the `fillRect` method directly on the canvas context to fill each pixel individually. 2. **PutImageData**: This approach uses the `createImageData` method to create an image data object, populates it with the pixel values, and then applies this image data to the canvas using the `putImageData` method. **Options being compared** The two approaches have different pros and cons: * **FillRect**: + Pros: Simple and straightforward. Each pixel is filled individually, which can be beneficial for small to medium-sized canvases. + Cons: Can be slower due to the overhead of repeated calls to `fillRect` and possibly causing browser rendering pauses. * **PutImageData**: + Pros: Can be faster because it uses a bulk operation ( filling the image data) followed by a single call to `putImageData`, which can be optimized by the browser's renderer. Additionally, this method avoids repeated calls to `fillRect`. + Cons: May require more memory for storing the image data object and can lead to slower performance if the canvas is very large. **Library usage** In both test cases, we see that JavaScript's built-in canvas API (`document.getElementById('c').getContext('2d')`) is used to interact with the canvas element. The `createImageData` method is part of this API, which allows us to create an image data object from a specified width and height. **Special JS features or syntax** There are no specific JavaScript features or syntax mentioned in the provided code that would be unique to these test cases. However, it's worth noting that using canvas elements with JavaScript is a fundamental part of creating interactive graphics and animations on the web. **Other alternatives** If you're looking for alternative ways to fill pixels on an HTML canvas element, here are some options: 1. **ImageDataDraw**: This is a library specifically designed for fast and efficient rendering of images on the Web. It provides a high-level API for working with image data and can be used as a drop-in replacement for `createImageData` and `putImageData`. 2. **Canvas Pixel Manipulation**: There are also various libraries, such as `canvas-pixel-manipulation`, that provide functions for manually manipulating individual pixels on the canvas element. 3. ** WebGL or WebGPU**: If you need to perform complex graphics rendering, consider using WebGL or WebGPU APIs, which can provide better performance and more control over graphics rendering. Keep in mind that these alternatives might have different trade-offs and requirements compared to the built-in `createImageData` and `putImageData` methods.
Related benchmarks:
Setting Canvas Pixel
Setting Canvas Pixel
Setting Canvas Pixel With Same Color
Setting multiple canvas pixels
Comments
Confirm delete:
Do you really want to delete benchmark?