Benchmark: Image vs canvas with webgl2d

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');
canvas2.width = 640;
canvas2.height = 480;

var ctx = canvas.getContext('2d');
var ctx2 = canvas2.getContext('2d');

var cv = document.createElement('canvas');
cv.width = 700;
cv.height = 700;
var cvx = cv.getContext('2d');

img.addEventListener('load', function() {
  
  cvx.drawImage(img,0,0);
  doneLoading = true;
    
});

img.src = 'https://1.bp.blogspot.com/-52MtzD0GfX0/WvP52CL1WjI/AAAAAAAAOVw/_OpK4JHeWK01d-7IiZ6vzojYGhXqLRXrACLcBGAs/s1600/EMxediL.jpg';

Tests:

Image
if (doneLoading) ctx.drawImage(img,0,0);
canvas Image
if (doneLoading) ctx2.drawImage(cv,0,0);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Image
canvas Image

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 24 days ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:136.0) Gecko/20100101 Firefox/136.0

Browser/OS: Firefox 136 on Linux

View result in a separate tab

Test name	Executions per second
Image	252215.0 Ops/sec
canvas Image	219829.3 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down the provided JSON data and explain what's being tested, compared, and some pros/cons of different approaches.

**Benchmark Overview**

The benchmark is designed to compare the performance of drawing an image using two different methods:

1. **Image**: Using a raw `Image` object.
2. **Canvas with WebGL 2D**: Using the `canvas` element's `getContext('2d')` method, which can render WebGL 2D content.

**Script Preparation Code**

The script preparation code creates several HTML elements:

* Two `canvas` elements (`canvas` and `canvas2`) with the same dimensions.
* A third `canvas` element (`cv`) with a larger size (700x700).
* Each `canvas` element is assigned to a separate 2D drawing context (`ctx`, `ctx2`, and `cvx`, respectively).

The script then sets up an event listener for the `img` object's `load` event. When the image finishes loading, it draws the image on each of the three `canvas` elements using the corresponding drawing contexts.

**Individual Test Cases**

There are two individual test cases:

1. **Image**: This test case only executes a single line of code: `if (doneLoading) ctx.drawImage(img, 0, 0);`. It's essentially testing whether the browser can draw an image on the `canvas` element when it's loaded.
2. **Canvas with WebGL 2D**: This test case also executes a single line of code: `if (doneLoading) ctx2.drawImage(cv, 0, 0);`. Similar to the previous test case, but using the drawing context of the larger `cv` canvas.

**Benchmark Results**

The latest benchmark results show two sets of execution counts per second for each test case:

1. **Canvas with WebGL 2D**: 170,066.078125 executions/second.
2. **Image**: 101,514.7578125 executions/second.

These results suggest that the browser performs better when using the `canvas` element's drawing context to render WebGL 2D content compared to directly drawing an image on the `canvas` element.

**Pros and Cons**

**Canvas with WebGL 2D:**

Pros:

* Can take advantage of GPU acceleration for improved performance.
* May offer better rendering quality due to hardware acceleration.

Cons:

* Requires support for WebGL 2.0, which might not be enabled in all browsers or versions.
* May introduce additional overhead due to the need for WebGL setup and teardown.

**Image:**

Pros:

* Simpler and more straightforward implementation.
* Does not require any special browser features or extensions.

Cons:

* May suffer from slower performance compared to using WebGL 2D rendering.
* Can lead to lower rendering quality due to software-based rendering.

**Other Considerations**

When comparing these two approaches, it's essential to consider factors such as:

* Browser support: Ensure that the target browsers support WebGL 2.0 and can handle the additional overhead of WebGL rendering.
* Performance overhead: Be aware of any potential performance penalties associated with using WebGL 2D rendering.
* Rendering quality: Consider whether the improved rendering quality offered by WebGL 2D is worth the added complexity.

**Alternatives**

If you're looking for alternative approaches, consider:

1. **Canvas without WebGL**: Use only the `canvas` element's drawing context without enabling WebGL 2.0. This approach can simplify the implementation but may sacrifice performance.
2. **WebGL 1.x**: If you need to support older browsers or environments, consider using WebGL 1.0 instead of 2.0. However, keep in mind that this may not provide the same level of performance and rendering quality as WebGL 2.0.
3. **Other rendering APIs**: Explore alternative rendering APIs like WebGPU or HTML5 Canvas with more advanced features like pixel buffers and shaders.

I hope this explanation helps!

Related benchmarks:

Image vs canvas with webgl2d (version: 0)

Testing draw calls using a raw Image versus canvas

Comparing performance of: Image vs canvas Image

Created: 2 years ago by: Guest

Jump to the latest result

Image

canvas Image

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):