$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.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);
$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);
$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);
--enable-precise-memory-info
flag.
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) |
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 |
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:
These options test the performance of drawImage
under different conditions, including varying degrees of scaling.
Pros and Cons of Each Approach
drawImage
when scaling down an image, which is a common use case.drawImage
when scaling an image between two sizes, which is also a common use case.drawImage
when no scaling is applied, which can help identify bottlenecks related to image rendering and context switching.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:
drawImage
against other image rendering methods, such as img.src
updates with requestAnimationFrame
.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.