Benchmark: drawImage() img vs canvas vs bitmap + cropping, fix loading

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://1.bp.blogspot.com/-52MtzD0GfX0/WvP52CL1WjI/AAAAAAAAOVw/_OpK4JHeWK01d-7IiZ6vzojYGhXqLRXrACLcBGAs/s1600/EMxediL.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:

empty
bitmap
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)
image
bitmap && c.drawImage(img, 250, 250, 250, 250, 0, 0, 1000, 1000)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
empty
canvas
bitmap
image

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

Let's dive into explaining the benchmark test case on MeasureThat.net.

**Benchmark Definition**

The provided JSON represents a JavaScript microbenchmark that tests the performance of drawing an image using different approaches. The benchmark is named "drawImage() img vs canvas vs bitmap + cropping, fix loading".

**Options Compared**

There are four options compared in this benchmark:

1. **Bitmap**: This option uses the `createImageBitmap` API to create a bitmap representation of the image.
2. **Canvas**: This option uses a `<canvas>` element and its 2D drawing context (`context`) to draw the image directly onto the canvas.
3. **Bitmap + Canvas**: This option combines both approaches by first creating a bitmap representation of the image using `createImageBitmap`, and then drawing that bitmap onto a separate canvas.
4. **Bitmap + Image Drawing (without Canvas)**: This option creates a bitmap representation of the image and draws it directly onto another bitmap, bypassing the canvas altogether.

**Pros and Cons**

Here's a brief summary of the pros and cons of each approach:

* **Bitmap**: Pros - simple to implement, can be faster for small images. Cons - may not work well for larger images or complex images, requires `createImageBitmap` API.
* **Canvas**: Pros - widely supported, easy to use, flexible. Cons - may be slower than bitmap for very large images, requires explicit memory management.
* **Bitmap + Canvas**: Pros - combines the benefits of both approaches, can be faster and more efficient. Cons - adds complexity due to the need to create multiple bitmaps and manage them.
* **Bitmap + Image Drawing (without Canvas)**: Pros - simple to implement, can be faster for very large images. Cons - bypasses the canvas's efficiency benefits, requires manual bitmap management.

**Library Usage**

The benchmark uses the `createImageBitmap` API, which is a part of the Web API specification. This library provides an efficient way to create bitmap representations of images.

**Special JS Features/Syntax**

There are no special JavaScript features or syntax used in this benchmark that would require additional explanation.

**Other Considerations**

When choosing between these approaches, consider the following factors:

* Image size and complexity: For smaller images, bitmap may be faster. For larger images, canvas might be a better choice.
* Performance requirements: If high performance is critical, using `createImageBitmap` API or combining both bitmap and canvas approaches might be more efficient.
* Development ease: Canvas is generally easier to use and maintain due to its widespread support and built-in features.

**Alternatives**

Other alternatives for drawing images in JavaScript include:

* Using the HTML5 `<img>` element directly, which can provide a simple way to display images without requiring additional library usage.
* Utilizing WebGL or WebGPU, which provide low-level access to graphics hardware for more complex image processing and rendering tasks.
* Leveraging libraries like Pixi.js, Three.js, or Fabric.js, which provide high-level APIs for creating interactive web applications with rich graphics capabilities.

I hope this explanation helps you understand the benchmark test case on MeasureThat.net!

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/124.0.0.0 Safari/537.36 Edg/124.0.0.0

Browser/OS: Chrome 124 on Windows

View result in a separate tab

Test name	Executions per second
empty	24984804.0 Ops/sec
canvas	477218.4 Ops/sec
bitmap	378751.3 Ops/sec
image	967282.4 Ops/sec

Related benchmarks:

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

Comparing performance of: empty vs canvas vs bitmap vs image

Created: 6 months ago by: Registered User

Jump to the latest result

empty

canvas

bitmap

image

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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