Benchmark: drawImage() scaling down performance

Script Preparation code:

$sourceWidth = 3000;
$sourceHeight = 3000;
$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 = $sourceWidth;
$destCanvas.height = $sourceHeight;
$destContext = $destCanvas.getContext("2d");

Tests:

Scaling from a large canvas area to a small canvas area
$destContext.drawImage($sourceCanvas, 0, 0, $sourceWidth, $sourceHeight, 0, 0, 100, 100); // Force the drawImage call to be evaluated within this benchmark code: $destContext.getImageData(0, 0, 1, 1);
Scaling from a large 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 large canvas area to a large 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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Scaling from a large canvas area to a small canvas area
Scaling from a large canvas area to a medium canvas area
Scaling from a large canvas area to a large canvas area (no scaling)

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/111.0.0.0 Safari/537.36

Browser/OS: Chrome 111 on Windows

View result in a separate tab

Test name	Executions per second
Scaling from a large canvas area to a small canvas area	9.1 Ops/sec
Scaling from a large canvas area to a medium canvas area	9.0 Ops/sec
Scaling from a large canvas area to a large canvas area (no scaling)	8.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and its test cases.

**Benchmark Purpose**

The MeasureThat.net benchmark measures the performance of the `drawImage` method in JavaScript, specifically when scaling images from large to small canvas areas. The goal is to identify the most efficient approach for this operation.

**Options Compared**

Three different approaches are compared:

1. **Scaling from a large canvas area to a small canvas area**
2. **Scaling from a large canvas area to a medium canvas area**
3. **Scaling from a large canvas area to a large canvas area (no scaling)**

These options test the performance of `drawImage` under different conditions, including varying degrees of scaling.

**Pros and Cons of Each Approach**

1. **Scaling from a large canvas area to a small canvas area**
	* Pros: This approach tests the performance of `drawImage` when scaling down an image, which is a common use case.
	* Cons: This approach may not accurately represent real-world scenarios where images are often scaled up or retained at their original size.
2. **Scaling from a large canvas area to a medium canvas area**
	* Pros: This approach tests the performance of `drawImage` when scaling an image between two sizes, which is also a common use case.
	* Cons: This approach may not accurately represent the extreme scaling scenarios (small to large) that are often encountered in web development.
3. **Scaling from a large canvas area to a large canvas area (no scaling)**
	* Pros: This approach tests the performance of `drawImage` when no scaling is applied, which can help identify bottlenecks related to image rendering and context switching.
	* Cons: This approach may not accurately represent the typical use cases where images are scaled.

**Library Used**

The `CanvasRenderingContext2D` library is used throughout the benchmark. It provides an API for rendering 2D graphics on the web, including image drawing and scaling.

**Special JavaScript Features or Syntax**

None of the provided test cases utilize special JavaScript features or syntax beyond standard `drawImage` method calls. However, it's worth noting that some browsers may have specific optimizations or differences in their `CanvasRenderingContext2D` implementations that could affect benchmark results.

**Other Alternatives**

If you wanted to modify this benchmark or create a new one, here are some alternative approaches:

* Test the performance of different scaling algorithms (e.g., nearest-neighbor, bilinear, bicubic) using various image sizes and canvas resolutions.
* Compare the performance of `drawImage` against other image rendering methods, such as `img.src` updates with `requestAnimationFrame`.
* Include tests for edge cases, like scaling very large or small images, or dealing with non-power-of-2 canvas sizes.

By modifying this benchmark or creating new ones, you can gain a deeper understanding of the performance characteristics of different image scaling approaches and identify opportunities to optimize your web applications.

Related benchmarks:

drawImage() scaling down performance (version: 8)

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

Created: 4 years ago by: Registered User

Jump to the latest result

Scaling from a large canvas area to a small canvas area

Scaling from a large canvas area to a medium canvas area

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

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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