Run results for: Drawing pre-scaled image vs scaling (same size of result image)

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Safari/537.36

Browser: Chrome 111

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Scaling	145.6 Ops/sec
Drawing pre-scaled image	12497.5 Ops/sec
No scaling, 1px	60.7 Ops/sec

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);

Run results for: Drawing pre-scaled image vs scaling (same size of result image)

Scaling

Drawing pre-scaled image

No scaling, 1px with shift