Benchmark: drawImage Image vs Bitmap

Script Preparation code:

var img = new window.Image()
var imageBitmap

const canvas = document.createElement('canvas')
canvas.width = 640
canvas.height = 480

var ctx = canvas.getContext('2d')
var promise = new Promise(resolve => {
    img.addEventListener('load', function() {
        window.createImageBitmap(img)
            .then(function(bitmap) {
                imageBitmap = bitmap
                resolve()
            })
    })
})

img.src = 'https://1.bp.blogspot.com/-52MtzD0GfX0/WvP52CL1WjI/AAAAAAAAOVw/_OpK4JHeWK01d-7IiZ6vzojYGhXqLRXrACLcBGAs/s1600/EMxediL.jpg';

Tests:

Image
promise.then(()=> ctx.drawImage(img, 0, 0));
Bitmap
promise.then(()=> ctx.drawImage(imageBitmap, 0, 0));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Image
Bitmap

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript benchmark test case on the MeasureThat.net website. The test compares two approaches: drawing an image using the `drawImage` method and converting it to a bitmap using the Web API's `createImageBitmap` function.

**Options Compared**

The benchmark tests two options:

1. **Drawing the image directly**: Using the `drawImage` method to render the image on the canvas.
2. **Converting the image to a bitmap**: Converting the image to a bitmap using the `createImageBitmap` function and then drawing it on the canvas.

**Pros and Cons of Each Approach**

**Drawing the Image Directly**

Pros:

* Simple and straightforward approach
* No additional library or API calls required

Cons:

* May be slower due to the need to render the image directly on the canvas, which can be computationally expensive

**Converting the Image to a Bitmap**

Pros:

* Can potentially be faster since the bitmap conversion step is separate from rendering the image
* Can take advantage of hardware acceleration for bitmap creation

Cons:

* Requires additional library or API calls (in this case, `createImageBitmap`)
* May introduce additional overhead due to the creation of a new object and the need to manage its lifetime

**Library Used**

The benchmark uses the Web API's `createImageBitmap` function from the `window.createImageBitmap()` method. This function is used to create a bitmap representation of an image, which can then be drawn on the canvas.

**Special JS Feature or Syntax**

There are no special JavaScript features or syntax used in this benchmark that would require specific knowledge or expertise.

**Other Alternatives**

Other alternatives for drawing images on the web include:

* Using WebGL (Web Graphics Library) to render images directly
* Utilizing canvas's `drawImage` method with other optimizations, such as caching images or using texture atlasing
* Leveraging browser-specific APIs like Windows' Direct2D or Chromium's Skia

In conclusion, this benchmark provides a clear comparison between two approaches to drawing images on the web. The choice of approach depends on the specific use case and performance requirements.

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Linux; Android 10; Titan) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.45 Mobile Safari/537.36

Browser/OS: Chrome Mobile 96 on Android

View result in a separate tab

Test name	Executions per second
Image	1246766.1 Ops/sec
Bitmap	1316210.0 Ops/sec

Related benchmarks:

drawImage Image vs Bitmap (version: 0)

Comparing performance of: Image vs Bitmap

Created: 2 years ago by: Guest

Jump to the latest result

Image

Bitmap

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):