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)

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 17 runs

canvas

25.9M/s

bitmap

25.9M/s

img

25.6M/s

View exact numbers

✓ canvas: 25,938,920 ops/sec
• bitmap: 25,890,200 ops/sec
• img: 25,624,356 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
img
canvas
bitmap

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:6.8) Goanna/20260121 PaleMoon/34.0.1

Browser/OS: Pale Moon (Firefox Variant) 34 on Windows

View result in a separate tab

img

343.5M/s

canvas

343.0M/s

bitmap

340.8M/s

View exact numbers

Test name	Executions per second
✓ img	343,506,752 Ops/sec
canvas	343,043,648 Ops/sec
bitmap	340,774,432 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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.

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

Comparing performance of: `img vs canvas vs bitmap`

Created: 3 years ago by: Registered User

Go to the latest result

img

canvas

bitmap

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 17 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: img vs canvas vs bitmap

Created: 3 years ago by: Registered User

Go to the latest result

img

canvas

bitmap

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 17 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: `img vs canvas vs bitmap`