title: Black image is getting returned from canvas.toBlob
body: <p>The black image is appearing instead of showing a cropped image in my case. I have tried using <code>image.onload</code> as well. What could be the possible reason for this?</p>
  
  <p>Code:</p>
  
  <pre><code>
      const canvas = document.createElement('canvas');
      canvas.width = pixelCrop.width;
      canvas.height = pixelCrop.height;
      const ctx = canvas.getContext('2d');
      const newImage = new Image();
  
      ctx.drawImage(
        newImage,
        pixelCrop.x,
        pixelCrop.y,
        pixelCrop.width,
        pixelCrop.height,
        0,
        0,
        pixelCrop.width,
        pixelCrop.height
      );
  
      //image -- &lt;img src='url'/&gt;
      newImage.src = image.src;
  
      return new Promise((resolve, reject) =&gt; {
        canvas.toBlob((blob) =&gt; {
          console.log('blob is', blob);
          blob.name = fileName;
          window.URL.revokeObjectURL(this.fileUrl);
          this.fileUrl = window.URL.createObjectURL(blob);
          resolve(this.fileUrl);
        }, 'image/jpeg');
      });
  
  
  
  </code></pre>
  
  <p><a href="https://imgur.com/a/Wwzaw1T" rel="nofollow noreferrer">screenshot</a></p>