Toggle navigation
MeasureThat.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
OffscreenCanvas
(version: 0)
OffscreenCanvas
Comparing performance of:
Canvas vs OffscreenCanvas
Created:
6 years ago
by:
Guest
Jump to the latest result
Script Preparation code:
var img = new Image(); var imageBitmap; var doneLoading = false; let canvas = document.createElement('canvas'); canvas.width = 640; canvas.height = 480; let canvas2 = document.createElement('canvas'); let offscreen = canvas2.transferControlToOffscreen(); offscreen.width = 640; offscreen.height = 480; var ctx = canvas.getContext('2d'); var ctx2 = offscreen.getContext('2d'); img.addEventListener('load', function() { Promise.all([ createImageBitmap(img) ]).then(function(images) { imageBitmap = images[0]; doneLoading = true; }, false); }); img.src = 'https://media.discordapp.net/attachments/447410261289205781/574359442913492992/unknown.png';
Tests:
Canvas
if (doneLoading) { ctx.clearRect(0,0,640,480); ctx.drawImage(imageBitmap,0,0); }
OffscreenCanvas
if (doneLoading) { ctx2.clearRect(0,0,640,480); ctx2.drawImage(imageBitmap,0,0); }
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (2)
Previous results
Fork
Test case name
Result
Canvas
OffscreenCanvas
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
5 months ago
)
User agent:
Mozilla/5.0 (iPhone; CPU iPhone OS 18_7 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/26.1 Mobile/15E148 Safari/604.1
Browser/OS:
Mobile Safari 26 on iOS 18.7
View result in a separate tab
Embed
Embed Benchmark Result
Test name
Executions per second
Canvas
848903232.0 Ops/sec
OffscreenCanvas
797618240.0 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
I'll provide an explanation of the benchmark, its options, pros and cons, and other considerations. **Benchmark Overview** The benchmark measures the performance of two approaches to render images on a 480x640 pixel canvas: `Canvas` and `OffscreenCanvas`. The goal is to clear the canvas, draw the image, and then display it. **Options Compared** There are two options being compared: 1. **Canvas**: Renders the image directly onto the main rendering context (`ctx`) of the canvas element. 2. **OffscreenCanvas**: Creates a separate offscreen canvas element (`offscreen`), transfers control to it, and renders the image on that offscreen canvas using its own rendering context (`ctx2`). The resulting offscreen canvas is then transferred back to the original canvas element. **Pros and Cons of Each Approach** 1. **Canvas** * Pros: + Simpler implementation. + No need for an additional canvas element. * Cons: + May incur higher overhead due to rendering on the main context, which can lead to slower performance. 2. **OffscreenCanvas** * Pros: + Can potentially reduce rendering overhead by using a separate offscreen context. + Allows for more control over rendering settings and optimization. * Cons: + Requires an additional canvas element, which adds complexity to the implementation. **Other Considerations** 1. **Library Usage**: The benchmark uses the `createImageBitmap` function from the Web APIs, which is a standardized API for working with image bitmaps in web applications. This library provides a convenient way to manipulate images and is widely supported across browsers. 2. **Special JS Feature or Syntax**: There is no special JavaScript feature or syntax used in this benchmark. **Alternatives** If you're interested in exploring alternative approaches, here are some options: 1. **WebGL**: WebGL is a low-level API for rendering 3D graphics on the web. It provides more control over rendering settings and can be optimized for specific use cases. 2. **Canvas with WebGL**: You could also consider using WebGL with canvas to render images. This approach would require setting up a WebGL context within the canvas element, but it offers more flexibility in terms of rendering customization. Keep in mind that these alternatives may introduce additional complexity or dependencies compared to the original Canvas and OffscreenCanvas approaches.
Related benchmarks:
Image vs ImageBitmap 2
Image vs ImageBitmap+OffscreenCanvas
OffscreenCanvas001
Canvas Image vs Image Bitmap
Comments
Confirm delete:
Do you really want to delete benchmark?