Benchmark: drawImage() img vs canvas vs bitmap + cropping

Script Preparation code:

var canvas = document.createElement('canvas')
var context = canvas.getContext('2d')
var bitmap
var img = new Image()
img.onload = async () => {
    canvas.width = img.width
    canvas.height = img.height
    context.drawImage(img, 0, 0)
    bitmap = await createImageBitmap(img)
}
img.src = 'https://neurostof.nl/ns/letters.jpg'

var c = document.createElement('canvas').getContext('2d')


// bitmap && c.drawImage(img,    250, 250, 250, 250, 0, 0, 1000, 1000)
// bitmap && c.drawImage(canvas, 250, 250, 250, 250, 0, 0, 1000, 1000)
// bitmap && c.drawImage(bitmap, 250, 250, 250, 250, 0, 0, 1000, 1000)

Tests:

img
bitmap && c.drawImage(img, 250, 250, 250, 250, 0, 0, 1000, 1000)
canvas
bitmap && c.drawImage(canvas, 250, 250, 250, 250, 0, 0, 1000, 1000)
bitmap
bitmap && c.drawImage(bitmap, 250, 250, 250, 250, 0, 0, 1000, 1000)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
img
canvas
bitmap

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser/OS: Chrome 130 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
img	19934520.0 Ops/sec
canvas	19775930.0 Ops/sec
bitmap	19971804.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is tested, compared options, pros/cons, and other considerations.

**Benchmark Definition**
The benchmark definition defines three test cases: drawing an image using `drawImage()` on different targets (bitmap, canvas, and canvas with cropped bitmap).

**Options Compared**

1. **Bitmap**: Drawing the image directly onto a bitmap object.
2. **Canvas**: Drawing the image onto a `canvas` element.
3. **Canvas with Cropped Bitmap**: Drawing the image onto a `canvas` element using the cropped version of the original bitmap.

**Pros and Cons**

* **Bitmap**: Pros: simple, fast, and efficient. Cons: may not be compatible with all browsers or devices.
* **Canvas**: Pros: widely supported, allows for more control over drawing. Cons: may be slower than bitmap, depending on rendering.
* **Canvas with Cropped Bitmap**: Pros: takes advantage of the cropped version of the image, which might improve performance. Cons: adds additional complexity and potential browser incompatibilities.

**Library and Purpose**
The `createImageBitmap()` library is used to create a bitmap object from an image source (in this case, the loaded `img` element). This library allows for efficient image processing and manipulation on Web APIs like Canvas.

**Special JavaScript Feature or Syntax**
The benchmark uses asynchronous code (`async/await`) for img.onload event handling. This syntax is supported by most modern browsers and allows for more readable and manageable code.

**Other Considerations**

* **Browser Incompatibilities**: The benchmark assumes that the Chrome browser version 129 will be used. Other browser versions or platforms might not work as expected.
* **Device Platform**: The benchmark runs on a desktop platform, which may affect performance compared to mobile devices.
* **Image Size and Complexity**: The image size is relatively large (1000x1000 pixels), and the cropping operation adds additional processing steps.

**Alternatives**

If you want to compare these options in different browsers or platforms, you might consider:

1. Using a different browser version or platform to test for compatibility.
2. Adding more complex images or scenarios to stress the rendering engine.
3. Exploring other drawing APIs like WebGL or WebAssembly.
4. Optimizing the benchmark code for better performance and accuracy.

Keep in mind that each alternative will introduce new considerations, such as potential incompatibilities with different browsers or platforms, and may affect the overall quality of the results.

Related benchmarks:

drawImage() img vs canvas vs bitmap + cropping (version: 1)

Comparing performance of: img vs canvas vs bitmap

Created: 2 years ago by: Registered User

Jump to the latest result

img

canvas

bitmap

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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