Benchmark: drawImage: Copy from image or canvas fixed

HTML Preparation code:

<canvas id="target" width="200" height="200"></canvas>

Script Preparation code:

var imagebase = "data:image/png;base64,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";

var image = document.createElement('img');
image.src = imagebase;
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 200;
var ctx = canvas.getContext('2d');
var imageloaded = false;
var imageBitmap;
image.onload = async function() {
  ctx.drawImage(image, 0, 0);
  imageloaded = true;
  imageBitmap = await createImageBitmap(image)
};

var drawcanvas = document.getElementById('target');
var drawctx = drawcanvas.getContext('2d');

Tests:

copy image section
drawctx.drawImage(image, 50, 50, 120, 120, 5, 5, 120, 120);
copy canvas section
drawctx.drawImage(canvas, 50, 50, 120, 120, 5, 5, 120, 120);
copy imageBitmap
drawctx.drawImage(imageBitmap, 50, 50, 120, 120, 5, 5, 120, 120);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
copy image section
copy canvas section
copy imageBitmap

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 130 on Windows

View result in a separate tab

Test name	Executions per second
copy image section	457977.1 Ops/sec
copy canvas section	700022.6 Ops/sec
copy imageBitmap	384117.5 Ops/sec

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

LLMs can make mistakes. Check important info.

A complex benchmarking scenario!

To provide an accurate answer, I'll need to analyze the provided code snippets and compare their performance.

From the `RawUAString` field in the latest benchmark result, we can infer that the browser is Chrome 128 on a Windows Desktop.

Now, let's examine the benchmark definitions:

**Test 1: "copy image section"**
```javascript
drawctx.drawImage(image, 50, 50, 120, 120, 5, 5, 120, 120);
```
This code draws an image from `image` at coordinates (50, 50) with a size of 120x120 pixels.

**Test 2: "copy canvas section"**
```javascript
drawctx.drawImage(canvas, 50, 50, 120, 120, 5, 5, 120, 120);
```
This code draws an image from `canvas` (not the original `image`) at coordinates (50, 50) with a size of 120x120 pixels.

**Test 3: "copy imageBitmap"**
```javascript
drawctx.drawImage(imageBitmap, 50, 50, 120, 120, 5, 5, 120, 120);
```
This code draws an image from `imageBitmap` (a bitmap representation of the original `image`) at coordinates (50, 50) with a size of 120x120 pixels.

The differences between these tests lie in:

1. The source of the image: `image`, `canvas`, or `imageBitmap`.
2. The drawing parameters: the x and y coordinates, and the width and height of the rectangle to draw.

To provide an accurate answer, I would need more information about the original code that generates these benchmark definitions. However, based on the provided code snippets, here are some general observations:

* The performance difference between `image` and `canvas` might be related to the overhead of creating a new canvas object.
* The performance difference between `imageBitmap` and either `image` or `canvas` could be due to the complexity of converting an image to a bitmap representation.

Without additional context, it's difficult to provide a definitive answer. If you have more information about the original code, I'd be happy to help further!

Related benchmarks:

drawImage: Copy from image or canvas fixed (version: 0)

Test

Comparing performance of: copy image section vs copy canvas section vs copy imageBitmap

Created: one year ago by: Guest

Jump to the latest result

copy image section

copy canvas section

copy imageBitmap

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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