Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
drawImage and getImageData on Canvas vs OffscreenCanvas 2
(version: 0)
Comparing performance of:
Main Thread vs Worker Thread
Created:
4 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var blob = new Blob([ ` let bitmap = undefined; let canvas = undefined; let ctx = undefined; let postAMessage=self.postMessage; self.onmessage = function(ev) { if(ev.data.msg === 'bitmap' && canvas != undefined) { bitmap = ev.data.imageB; console.log("Received an ImageBitmap next!"); while (true) { ctx.clearRect(0,0,640,480); ctx.drawImage(bitmap, 0,0); } } if(ev.data.msg === 'init' && bitmap != undefined) { canvas = ev.data.canvas; ctx = canvas.getContext('2d'); console.log("Received a canvas next!"); while (true) { ctx.clearRect(0,0,640,480); ctx.drawImage(bitmap, 0,0); } } if(ev.data.msg === 'bitmap' && canvas == undefined) { console.log("Received a bitmap first!"); bitmap = ev.data.imageB; } if(ev.data.msg === 'init' && bitmap == undefined) { console.log("Received a canvas first!"); canvas = ev.data.canvas; ctx = canvas.getContext('2d'); } } `]); var myWorker = new Worker(window.URL.createObjectURL(blob)); var buff = new ArrayBuffer(8); var img = new Image(); img.crossOrigin = 'Anonymous'; img.src = "https://www.google.com/s2/favicons?domain=www.google.com"; img.decode().then(() => {createImageBitmap(img).then(Ibitmap => { myWorker.postMessage({imageB: Ibitmap, msg:'bitmap'}, [Ibitmap]); })}); var canvas = document.createElement("canvas"); var c2 = document.createElement("canvas"); c2.width = 640; c2.height = 480; c2 = c2.transferControlToOffscreen(); canvas.width = 640; canvas.height = 480; c2.width = 640; c2.height = 480; var ctx = canvas.getContext('2d'); myWorker.postMessage({msg: 'init', canvas: c2}, [c2]);
Tests:
Main Thread
if (img.width > 0){ ctx.drawImage(img, 0, 0); var imageData = ctx.getImageData(0, 0, img.width, img.height); }
Worker Thread
if (img.width > 0) myWorker.postMessage(buff);
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Main Thread
Worker Thread
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
13 days ago
)
User agent:
Mozilla/5.0 (iPad; CPU OS 16_7_10 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.7.2 Mobile/15E148 Safari/604.1
Browser/OS:
Mobile Safari 17 on iOS 16.7.10
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Main Thread
8447055.0 Ops/sec
Worker Thread
9518210.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
Let's break down the benchmark and its test cases. **Benchmark Overview** The benchmark compares the performance of two approaches: drawing an image on the main thread (using Canvas) and sending an image to a worker thread for processing, which then draws the same image using OffscreenCanvas. The goal is to determine whether using a separate thread improves performance in this specific use case. **Test Cases** There are two test cases: 1. **Main Thread**: This test case measures the execution time of drawing an image on the main thread using Canvas. It creates an image, clears the canvas, draws the image, and gets the image data. 2. **Worker Thread**: This test case measures the execution time of sending an image to a worker thread for processing, which then draws the same image using OffscreenCanvas. The image is created, sent to the worker thread, and then processed by the worker thread. **Options Compared** The benchmark compares two options: 1. **Main Thread**: Drawing an image on the main thread using Canvas. 2. **Worker Thread**: Sending an image to a worker thread for processing, which then draws the same image using OffscreenCanvas. **Pros and Cons of Each Approach** **Main Thread:** Pros: * Easier to understand and implement * No need for additional infrastructure (worker threads) * Can be optimized for specific use cases Cons: * May lead to performance bottlenecks due to blockage of the main thread * Requires more resources (memory, CPU) compared to offloading work to a worker thread **Worker Thread:** Pros: * Allows for better utilization of system resources and CPU * Can improve performance by offloading computationally expensive tasks to a separate thread * Reduces blocking of the main thread, allowing it to continue executing other tasks Cons: * Requires additional infrastructure (worker threads) and management * May introduce overhead due to communication between the main thread and worker thread * Can be more complex to understand and implement compared to the main thread approach **Other Considerations** * The benchmark uses OffscreenCanvas, which is a relatively new feature introduced in Chrome 83. Its performance characteristics are still being optimized. * The benchmark assumes that the image processing task on the worker thread can be parallelized, which may not always be the case. **Alternatives** If you're looking for alternatives to this benchmark or want to explore other approaches, here are some options: 1. **Native Web Workers**: Instead of using OffscreenCanvas, you could use native web workers (Web Workers API) to process images in a separate thread. 2. **Canvas-to-ImageConverter**: You could use libraries like Canvas-to-Image-Converter or imagejs to convert Canvas images to other formats (e.g., PNG, JPEG), which may have different performance characteristics. 3. **GPU-based Image Processing**: If you're working with high-performance graphics applications, you might consider using GPU-based image processing techniques, such as WebGL, to offload computationally expensive tasks. Keep in mind that the choice of approach depends on your specific use case and requirements.
Related benchmarks:
OffscreenCanvas drawImage vs HTMLCanvasElement drawImage()
OffscreenCanvas vs HTMLCanvasElement drawImage() (w/ Transferable)
OffscreenCanvas vs HTMLCanvasElement drawImage() (w/ Transferables)
drawImage and getImageData on Canvas vs OffscreenCanvas
Comments
Confirm delete:
Do you really want to delete benchmark?