Benchmark: drawImage() scaling down performance with no smoothing

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");
$destContext.imageSmoothingEnabled = false;

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 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Linux

View result in a separate tab

Test name	Executions per second
Scaling from a large canvas area to a small canvas area	12.0 Ops/sec
Scaling from a large canvas area to a medium canvas area	16.7 Ops/sec
Scaling from a large canvas area to a large canvas area (no scaling)	20.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down what's being tested in the provided JSON and explain the options, pros, cons, library usage, special JavaScript features, and other considerations.

**Benchmark Definition:**

The benchmark measures the performance of `drawImage()` with different scaling approaches when drawing an image from a large canvas area to a smaller canvas area. The script prepares two canvases: `$sourceCanvas` (large) and `$destCanvas` (small). The images are filled with a solid color, and then the `drawImage()` method is called with different scaling parameters.

**Options Compared:**

1. **Scaling from large canvas area to medium canvas area**: `$destContext.drawImage($sourceCanvas, 0, 0, $sourceWidth, $sourceHeight, 0, 0, 600, 600);`
2. **Scaling from large canvas area to small canvas area**: `$destContext.drawImage($sourceCanvas, 0, 0, $sourceWidth, $sourceHeight, 0, 0, 100, 100);`
3. **No scaling (same canvas size)**: `$destContext.drawImage($sourceCanvas, 0, 0, $sourceWidth, $sourceHeight, 0, 0, $sourceWidth, $sourceHeight);`

**Pros and Cons of Each Approach:**

1. **Scaling from large to medium**: This approach might be faster because it reduces the amount of scaling required.
	* Pros: potentially faster execution
	* Cons: may introduce additional processing steps for downsampling
2. **Scaling from large to small**: This approach involves more severe scaling, which can be computationally expensive.
	* Pros: none obvious
	* Cons: likely slower execution due to increased scaling requirements
3. **No scaling**: This approach avoids any scaling and is likely the fastest but also lacks the benefit of downsampling.
	* Pros: potentially fastest execution
	* Cons: no benefit from downsampling

**Library Usage:**

In this benchmark, no libraries other than the built-in `Canvas` API are used.

**Special JavaScript Features/ Syntax:**

None are explicitly mentioned or used in this benchmark. However, it's worth noting that modern browsers support various advanced canvas features like texture mapping and alpha blending, which might be applicable to similar scenarios.

**Other Considerations:**

* The test cases use the `getImageData()` method to force the execution of the `drawImage()` call within each benchmark code.
* The `imageSmoothingEnabled` property is set to `false` in the `$destContext` for all tests, which might affect the performance results.

**Alternatives:**

Other alternatives to measure drawing performance could include:

1. Drawing multiple images with different scaling factors on the same canvas.
2. Comparing the performance of different graphics cards or GPU-accelerated rendering libraries like WebGL.
3. Using a synthetic image dataset to test various drawing algorithms and their relative performance.

Keep in mind that this is just one example, and there are many other ways to optimize and compare drawing performance in web applications.

Related benchmarks:

drawImage() scaling down performance with no smoothing (version: 0)

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

Fastest: N/A

Slowest: N/A

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