Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Get and Put image data on a canvas
(version: 0)
Comparing performance of:
get and set vs get, paint, and set
Created:
8 years ago
by:
Guest
Go to the latest result
HTML Preparation code:
<canvas id='drawcan' width='512' height='512'></canvas>
Script Preparation code:
var drawCon = document.getElementById('drawcan').getContext('2d');
Tests:
get and set
var imageData = drawCon.getImageData(0,0,512,512); drawCon.putImageData(imageData,0,0);
get, paint, and set
var imageData = drawCon.getImageData(0,0,512,512); for (var i = 0; i < 200; i++) { for (var j = 0; j < 200; j++) { imageData[i*512+j] = 0xff00ff; } } drawCon.putImageData(imageData,0,0);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
get and set
get, paint, and set
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
one year ago
)
User agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 18_1_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.1.1 Mobile/15E148 Safari/604.1
Browser/OS:
Mobile Safari 18 on iOS 18.1.1
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=571893" width="100%" height="500px"></iframe>
get and set
1K/s
get, paint, and set
1K/s
View exact numbers
Test name
Executions per second
✓
get and set
1,244 Ops/sec
get, paint, and set
1,065 Ops/sec
Autogenerated LLM Summary
(model
llama3.1:latest
, generated one year ago):
Let's break down what's happening in this benchmark test. **Benchmark Description** The benchmark is called "Get and Put image data on a canvas." It involves working with image data on a HTML5 canvas element, specifically: 1. Getting the image data using `getImageData()` method 2. Putting the image data back onto the canvas using `putImageData()` method There are two test cases: **Test Case 1: "get and set"** * The script preparation code creates a canvas context. * The benchmark definition code gets the image data from the entire canvas (512x512 pixels) using `getImageData()`. * It then puts the image data back onto the canvas at position (0,0) using `putImageData()`. **Test Case 2: "get, paint, and set"** * Similar to Test Case 1, it gets the image data from the entire canvas. * However, instead of simply putting the image data back, it loops through each pixel (200x200 times) and sets a new color value (`0xff00ff`) for each pixel in memory. This is done using simple assignment `imageData[i*512+j] = 0xff00ff;`. * Finally, it puts the modified image data back onto the canvas. **Library Used** None, this test uses only built-in JavaScript and HTML5 Canvas API methods. **JS Feature or Syntax** The test uses: 1. `getImageData()` method to get the pixel data from the canvas. 2. `putImageData()` method to put the pixel data back onto the canvas. 3. `for` loops for iteration, which is a basic JavaScript syntax. 4. Simple assignment `=` operator to modify pixel values. **Comparison and Alternatives** This benchmark compares the performance of two approaches: 1. **Get and set**: Simply getting the image data from the canvas and putting it back without modification. 2. **Get, paint, and set**: Getting the image data, modifying it in memory (by setting new color values), and then putting it back onto the canvas. Other alternatives to consider: * Using `createImageData()` method to create a new pixel array instead of getting it from the canvas using `getImageData()`. * Using Web Workers or other concurrency techniques to parallelize image data processing. * Implementing more sophisticated image filtering algorithms that take advantage of GPU acceleration. Regarding pros and cons: * **Get and set** approach is simple, but may not utilize any optimizations or caching mechanisms available in the browser. * **Get, paint, and set** approach allows for manual modification of pixel values, which can be useful for specific image processing tasks. However, it introduces additional overhead due to loop iterations and assignments. Keep in mind that these test cases are designed to measure performance on a particular task, and may not reflect real-world usage scenarios or other benchmarking criteria.
Related benchmarks
Image vs ImageBitmap 2
OffscreenCanvas
OffscreenCanvas GetImageData
Image vs canvas with 2d
Canvas Image vs Image Bitmap
Comments
Confirm delete:
Do you really want to delete benchmark?