Benchmark: Canvas vs img - MeasureThat.net

HTML Preparation code:

<canvas id="mycanvas" width="300" height="265" style='background: green'></canvas>

<img id="myimage" width="256" height="256" alt='' src='#' style='background: gray'></img>

Script Preparation code:

var i1 = "https://web-dev.imgix.net/image/T4FyVKpzu4WKF1kBNvXepbi08t52/uBEYI93uReLt091i15rF.png?auto=format&w=256"
var i2 = "https://bulma.io/images/placeholders/256x256.png"
var img1 = new Image()
img1.src = i1;

var img2 = new Image()
img2.src = i2;

var canvas = document.getElementById("mycanvas");
var ctx = canvas.getContext('2d');

var img = document.getElementById("myimage");

Tests:

canvas
ctx.drawImage(img1, 0, 0, 256, 256); ctx.drawImage(img2, 0, 0, 256, 256);
img
img.src = i1; img.src = i2

Historical Performance Data aggregated from 81 community runs

Desktop Results:

Chrome 51 runs

img

127K/s

canvas

0/s

View exact numbers

✓ img: 127,173 ops/sec
• canvas: 0 ops/sec

Firefox 18 runs

img

18K/s

canvas

0/s

View exact numbers

✓ img: 18,023 ops/sec
• canvas: 0 ops/sec

Mobile Results:

Chrome 12 runs

img

33K/s

canvas

0/s

View exact numbers

✓ img: 32,919 ops/sec
• canvas: 0 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
canvas
img

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 6 months ago)

User agent: Mozilla/5.0 (Android 16; Mobile; rv:149.0) Gecko/149.0 Firefox/149.0

Browser/OS: Firefox Mobile 149 on Android

View result in a separate tab

img

4K/s

canvas

0/s

View exact numbers

Test name	Executions per second
✓ img	3,839 Ops/sec
canvas	0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Measuring the performance of JavaScript microbenchmarks is an interesting topic.

**What is being tested?**

The provided JSON represents two benchmark test cases:

1. **Canvas vs img**: This test case compares the rendering performance of images using both the `Canvas` element and the native `img` tag.
2. **img**: This test case measures the performance of simply setting the `src` attribute of an image.

**Options compared**

In the Canvas vs img test case:

* The two options being compared are:
	+ Using a `Canvas` element to render the image (`ctx.drawImage()` method).
	+ Using the native `img` tag to display the image.
* The pros and cons of these approaches are as follows:
	+ **Canvas**:
		- Pros: Can provide more control over rendering, better support for graphics operations, and can be faster for complex images.
		- Cons: Requires an additional HTML element, which may increase page load time or have layout implications.
	+ **img**:
		- Pros: Simple, widely supported, and does not require additional HTML elements.
		- Cons: May be slower due to the overhead of the browser's image loading mechanism.

In the img test case:

* The two options being compared are:
	+ Setting the `src` attribute of an image element (`img.src = i1; img.src = i2;`).
	+ Not setting the `src` attribute (which means the image will not be displayed).

The pros and cons of these approaches are as follows:

* **Setting src**:
	+ Pros: Simple, fast.
	+ Cons: Does nothing (i.e., the image is not rendered).
* **Not setting src**:
	+ Pros: Can help avoid unnecessary computation or rendering.
	+ Cons: Does not provide any useful information about performance.

**Other considerations**

When measuring the performance of these two test cases, it's essential to consider the following factors:

* Image size and complexity: Larger or more complex images may take longer to render or load.
* Browser and device variations: Different browsers and devices may have varying levels of performance optimization or hardware capabilities that affect rendering speed.

**Library usage**

The Canvas vs img test case uses the `Canvas` element, which is a standard HTML5 API. The img test case does not use any specific library beyond what's built into the browser.

**Special JS features or syntax**

There are no special JavaScript features or syntax used in these benchmark tests.

**Alternatives**

If you wanted to compare other rendering methods for images, some alternatives could include:

* Using a library like Pixi.js or React-Canvas.
* Employing WebGL or WebGPU for more advanced graphics operations.
* Comparing the performance of different image compression algorithms (e.g., JPEG vs. WebP).

However, these alternatives would likely introduce additional complexity and may not be relevant to the specific use case of measuring image rendering performance using JavaScript.

Canvas vs img (version: 0)

Comparing performance of: `canvas vs img`

Created: 3 years ago by: Guest

Go to the latest result

canvas

img

Historical Performance Data aggregated from 81 community runs

Desktop Results:

Chrome 51 runs

Firefox 18 runs

Mobile Results:

Chrome 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Canvas vs img (version: 0)

Comparing performance of: canvas vs img

Created: 3 years ago by: Guest

Go to the latest result

canvas

img

Historical Performance Data aggregated from 81 community runs

Desktop Results:

Chrome 51 runs

Firefox 18 runs

Mobile Results:

Chrome 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `canvas vs img`