Run results for: drawImage with scaling vs context scaling

Run details:

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

Browser: Firefox 111

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
drawImage scaling	574421.9 Ops/sec
context scaling	364179.1 Ops/sec

HTML Preparation code:

  <canvas id="canvas1" width="50" height="50"></canvas>
  <br>
  <canvas id="canvas2" width="500" height="500"></canvas>
  <canvas id="canvas3" width="500" height="500"></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);

ctx3.scale(10, 10);

Tests:

drawImage scaling
ctx2.drawImage(canvas1, 0, 0, 50, 50, 0, 0, 500, 500);
context scaling
ctx3.drawImage(canvas1, 0, 0, 50, 50);

Run results for: drawImage with scaling vs context scaling

drawImage scaling

context scaling