Вывод изображения из сanvas показывает квадрат Малевича (чёрную картинку)

function uploadFile() {
  let image = new Image()

  image.onload = () => {
    let canv = document.createElement('canvas')
    let ctx = canv.getContext('2d')

    canv.width = 500
    canv.height = 500
    
    // cropData - насколько одна сторона больше другой (в пикселях)
    let cropData = 0
    let x = 0
    let y = 0

    // Уменьшаем изображение пропорционально
    // Затем ставим значение для x или y и cropData
    if (image.width > image.height) {
      image.height = 500
      image.width = image.width / (500 * image.height)

      cropData = image.width - image.height
      x = -(image.width - (cropData / 2))
    } else if (image.height > image.width) {
      image.width = 500
      image.width = image.height / (500 * image.width)

      cropData = image.height - image.width
      y = -(image.height - (cropData / 2))
    }

    // Рисуем
    ctx.drawImage(image, x, y, image.width, image.width, 0, 0, 500, 500)
    
    // Превращаем в Blob
    let data = canv.toBlob(blob => {
      let avatarNameDictionary = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890!@#$%&_-'.split('')
      
      let name = `avatar_${DH.uid}_`
      for (let i = 0; i < 32; i++) {
        name += avatarNameDictionary[Math.floor(Math.random() * 69)]
      }
      
      // Загружаем в хранилище
      storage().ref().child(`avatars/${name}.jpg`).put(blob).then(r1 => {
        firestore().collection('profiles').where('account', '==', DH.uid).get().then(r2 => {
          r2.forEach(doc => {
            // Обновляем фото в бд
            firestore().collection('profiles').doc(doc.id).update({
              avatar: `${name}.jpg`
            }).then(r3 => {
              // Перезагружаем.
              window.location.reload()
            })
          })
        })
      })
    }, 'image/jpeg', 0.9)
  }

  image.src = filePath
}