$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");
$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);
$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, 3000, 3000);
// 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 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 |
Test name | Executions per second |
---|---|
Scaling from a small canvas area to a small canvas area (no scaling) | 154.7 Ops/sec |
Scaling from a small canvas area to a medium canvas area | 930.3 Ops/sec |
Scaling from a small canvas area to a large canvas area | 45.7 Ops/sec |
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:
drawImage()
.drawImage()
.Pros and Cons of each approach:
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:
drawImage()