Как узнать размеры фото для canvasa?

Question

[kirillleogky]

Есть код:

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, ?, ?, ?, ?);
        }
      }
  })
}

Подскажите как брать ВСЕГДА актуальные размеры фото из fetcha?

Чтобы можно было записывать всегда нужные значения (чтобы фото не растягивалось а было чисто своего размера)?
Что сюда записать вместо "?":
ctx.drawImage(pic, ?, ?, ?, ?);

Примеры что я имею ввиду:

Answer 1

[wisgest]

При наступлении pic.oload (хотя, может быть и раньше) см. pic.naturalWidth и pic.naturalHight или, если эти значения вдруг не определены (в старых обозревателях), то pic.width и pic.hight, но только если они явно не заданы через атрибуты width и height.