Benchmark: Drawing pre-scaled image vs scaling (same size of result image)

HTML Preparation code:

 <canvas id="canvas1" width="50" height="50"></canvas>
 <br>
 <canvas id="canvas2" width="600" height="600"></canvas>
 <canvas id="canvas3" width="600" height="600"></canvas>

Script Preparation code:

var canvas1 = document.getElementById("canvas1")
var ctx1 = canvas1.getContext("2d");
var canvas2 = document.getElementById("canvas2")
var ctx2 = canvas2.getContext("2d");
var canvas3 = document.getElementById("canvas3")
var ctx3 = canvas3.getContext("2d");

ctx1.fillStyle = "rgb(10,80,80)";
ctx1.fillRect(0,0,50,50);
ctx1.fillStyle = "rgb(80,180,180)";
ctx1.fillRect(4,4,42,42);

Tests:

Scaling
ctx2.drawImage(canvas1, 0, 0, 50, 50, 0, 0, 500, 500); // Force to perform previous action ctx2.getImageData(0, 0, 1, 1);
Drawing pre-scaled image
ctx3.drawImage(canvas2, 0, 0, 500, 500); // Force to perform previous action ctx3.getImageData(0, 0, 1, 1);
No scaling, 1px with shift
ctx3.drawImage(canvas2, 0, 0, 1, 1, 1, 1, 1, 1); // Force to perform previous action ctx3.getImageData(1, 1, 1, 1);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Scaling
Drawing pre-scaled image
No scaling, 1px with shift

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/111.0

Browser/OS: Firefox 111 on Windows

View result in a separate tab

Test name	Executions per second
Scaling	1162.7 Ops/sec
Drawing pre-scaled image	1298.9 Ops/sec
No scaling, 1px with shift	1106.6 Ops/sec

Drawing pre-scaled image vs scaling (same size of result image) (version: 8)

Comparing performance of: Scaling vs Drawing pre-scaled image vs No scaling, 1px with shift

Created: one year ago by: Registered User

Jump to the latest result

Scaling

Drawing pre-scaled image

No scaling, 1px with shift

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A