How to find photo sizes for canvasa?

Question

JavaScript

There is a code:

let canvas = document.getElementById('canvas');

function getLinkToImage() {
const url = 'https://api.unsplash.com/photos/random?query=town,Minsk&client_id=КОД';
fetch(url)
  .then(res => res.json())
  .then(data => data.urls.small)
  .then(image => {
      if (canvas.getContext) {
        let ctx = canvas.getContext('2d');
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        let pic = new Image();
        pic.src = image;
        pic.onload = () => {
          ctx.drawImage(pic, ?, ?, ?, ?);
        }
      }
  })
}

Tell me how to take ALWAYS actual photo sizes from fetch?
So that you can always write down the necessary values ​​\u200b\u200b(so that the photo is not stretched, but is purely its size)?
What to write here instead of "?":
ctx.drawImage(pic, ?, ?, ?, ?);
Examples of what I mean:

Answer 1

I think he wants the interest to run nicely.

var count=0;
var interval = setInterval(function(){
    console.log(count+' %');
    count++;
   if(count>100)clearInterval(interval);
},10);

Answer 2

You are iterating from 1 to 100 but returning only the last value. And how is it supposed to be?

Answer 3

On the occurrence pic.oload(although it may be earlier), see pic.naturalWidthand pic.naturalHightor, if these values ​​are suddenly not defined (in older browsers), then pic.widthand pic.hight, but only if they are not explicitly set via the widthand attributes height.