$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;
$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 | 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 |
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:
$destContext.drawImage($sourceCanvas, 0, 0, $sourceWidth, $sourceHeight, 0, 0, 600, 600);
$destContext.drawImage($sourceCanvas, 0, 0, $sourceWidth, $sourceHeight, 0, 0, 100, 100);
$destContext.drawImage($sourceCanvas, 0, 0, $sourceWidth, $sourceHeight, 0, 0, $sourceWidth, $sourceHeight);
Pros and Cons of Each Approach:
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:
getImageData()
method to force the execution of the drawImage()
call within each benchmark code.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:
Keep in mind that this is just one example, and there are many other ways to optimize and compare drawing performance in web applications.