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)

​x
 
var canvas = document.createElement('canvas')var context = canvas.getContext('2d')var bitmapvar 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)

 
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 && c.drawImage(canvas, 250, 250, 250, 250, 0, 0, 1000, 1000)

bitmap

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

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

Test case name	Result
img
canvas
bitmap

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 10 days ago)

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

Browser/OS: Chrome 134 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
img	280802784.0 Ops/sec
canvas	267623824.0 Ops/sec
bitmap	267332032.0 Ops/sec

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

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

Bitmap: Drawing the image directly onto a bitmap object.
Canvas: Drawing the image onto a canvas element.
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:

Using a different browser version or platform to test for compatibility.
Adding more complex images or scenarios to stress the rendering engine.
Exploring other drawing APIs like WebGL or WebAssembly.
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.

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