Benchmark: drawImage() scaling up performance

Script Preparation code:

$sourceWidth = 100;
$sourceHeight = 100;
$sourceCanvas = document.createElement("canvas");
$sourceCanvas.width = $sourceWidth;
$sourceCanvas.height = $sourceHeight;
$sourceContext = $sourceCanvas.getContext("2d");
$sourceContext.fillStyle = "rgba(0,100,200,1)";
$sourceContext.fillRect(0, 0, $sourceWidth, $sourceHeight);

$destCanvas = document.createElement("canvas");
$destCanvas.width = 3000;
$destCanvas.height = 3000;
$destContext = $destCanvas.getContext("2d");

Tests:

Scaling from a small canvas area to a small canvas area (no scaling)
$destContext.drawImage($sourceCanvas, 0, 0, $sourceWidth, $sourceHeight, 0, 0, $sourceWidth, $sourceHeight); // Force the drawImage call to be evaluated within this benchmark code: $destContext.getImageData(0, 0, 1, 1);
Scaling from a small canvas area to a medium canvas area
$destContext.drawImage($sourceCanvas, 0, 0, $sourceWidth, $sourceHeight, 0, 0, 600, 600); // Force the drawImage call to be evaluated within this benchmark code: $destContext.getImageData(0, 0, 1, 1);
Scaling from a small canvas area to a large canvas area
$destContext.drawImage($sourceCanvas, 0, 0, $sourceWidth, $sourceHeight, 0, 0, 3000, 3000); // Force the drawImage call to be evaluated within this benchmark code: $destContext.getImageData(0, 0, 1, 1);

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 11 runs

Scaling from a small canvas area to a medium canvas area

42/s

Scaling from a small canvas area to a large canvas area

29/s

Scaling from a small canvas area to a small canvas area (no scaling)

12/s

Fastest: Scaling from a small canvas area to a medium canvas area (3.4x faster)

View exact numbers

✓ Scaling from a small canvas area to a medium canvas area: 42 ops/sec
• Scaling from a small canvas area to a large canvas area: 29 ops/sec
• Scaling from a small canvas area to a small canvas area (no scaling): 12 ops/sec

Firefox 6 runs

Scaling from a small canvas area to a medium canvas area

146/s

Scaling from a small canvas area to a small canvas area (no scaling)

141/s

Scaling from a small canvas area to a large canvas area

42/s

Fastest: Scaling from a small canvas area to a medium canvas area (3.5x faster)

View exact numbers

✓ Scaling from a small canvas area to a medium canvas area: 146 ops/sec
• Scaling from a small canvas area to a small canvas area (no scaling): 141 ops/sec
• Scaling from a small canvas area to a large canvas area: 42 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
Scaling from a small canvas area to a small canvas area (no scaling)
Scaling from a small canvas area to a medium canvas area
Scaling from a small canvas area to a large canvas area

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:140.0) Gecko/20100101 Firefox/140.0

Browser/OS: Firefox 140 on Linux

View result in a separate tab

Scaling from a small canvas area to a small canvas area (no scaling)

78K/s

Scaling from a small canvas area to a medium canvas area

288/s

Scaling from a small canvas area to a large canvas area

11/s

View exact numbers

Test name	Executions per second
✓ Scaling from a small canvas area to a small canvas area (no scaling)	78,418 Ops/sec
Scaling from a small canvas area to a medium canvas area	288 Ops/sec
Scaling from a small canvas area to a large canvas area	11 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

**What is being tested?**

MeasureThat.net is testing the performance of the `drawImage()` method in JavaScript, specifically how it performs when scaling an image. The test cases vary the input parameters to see how the browser handles different scenarios.

**Options compared:**

There are three test cases that compare the performance of `drawImage()` under different conditions:

1. **Scaling from a small canvas area to a small canvas area (no scaling)**: This test case passes the source canvas as is, without any scaling.
2. **Scaling from a small canvas area to a medium canvas area**: In this test case, the source canvas is scaled up to 600x600 pixels before being passed to `drawImage()`.
3. **Scaling from a small canvas area to a large canvas area**: This test case scales the source canvas up to 3000x3000 pixels before passing it to `drawImage()`.

**Pros and Cons of each approach:**

1. **No scaling**: Passing the source canvas as is allows for direct access to the image data, which might be beneficial for some operations. However, this test case may not accurately reflect real-world usage, where images are often scaled before being used.
2. **Scaling to medium size**: This approach simulates a common use case where an image needs to be resized before being used in a larger context. It's likely to provide a more realistic benchmark for developers.
3. **Scaling to large size**: Passing the source canvas at its largest scale might help identify performance issues that only arise when dealing with extremely large images. However, this may not be as representative of typical use cases.

**Library and purpose:**

In the provided test code, `getContext("2d")` is used to access the 2D drawing context of an HTML canvas element. This library provides a set of methods for manipulating graphics, including `drawImage()`, which allows developers to draw images on the canvas.

**Special JS feature or syntax:**

There are no special features or syntax mentioned in the provided code snippets. The JavaScript used is standard and should be compatible with most modern browsers.

**Other alternatives:**

If you were to recreate this benchmark, you might also consider testing:

* Different scaling factors (e.g., 50%, 200%)
* Using different image formats (e.g., JPEG, PNG, WebP)
* Adding additional graphical operations before or after `drawImage()`
* Comparing performance on different devices or browsers
* Testing the impact of caching or memoization on performance

drawImage() scaling up performance (version: 2) Benchmark.js

Comparing performance of: `Scaling from a small canvas area to a small canvas area (no scaling) vs Scaling from a small canvas area to a medium canvas area vs Scaling from a small canvas area to a large canvas area`

Created: 6 years ago by: Registered User

Go to the latest result

Scaling from a small canvas area to a small canvas area (no scaling)

Scaling from a small canvas area to a medium canvas area

Scaling from a small canvas area to a large canvas area

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 11 runs

Firefox 6 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() scaling up performance (version: 2) Benchmark.js

Comparing performance of: Scaling from a small canvas area to a small canvas area (no scaling) vs Scaling from a small canvas area to a medium canvas area vs Scaling from a small canvas area to a large canvas area

Created: 6 years ago by: Registered User

Go to the latest result

Scaling from a small canvas area to a small canvas area (no scaling)

Scaling from a small canvas area to a medium canvas area

Scaling from a small canvas area to a large canvas area

Historical Performance Data aggregated from 17 community runs

Desktop Results:

Chrome 11 runs

Firefox 6 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: `Scaling from a small canvas area to a small canvas area (no scaling) vs Scaling from a small canvas area to a medium canvas area vs Scaling from a small canvas area to a large canvas area`