Benchmark: drawImage with scaling vs context scaling

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
drawImage scaling
context scaling

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
drawImage scaling	574421.9 Ops/sec
context scaling	364179.1 Ops/sec

drawImage with scaling vs context scaling (version: 0)

Comparing performance of: drawImage scaling vs context scaling

Created: one year ago by: Guest

Jump to the latest result

drawImage scaling

context scaling

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A