index.html

<button type="button" id="share">Share</button>
<canvas id="myCanvas"></canvas>

<script>
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
image = new Image();
  
var file;

// Wait for the sprite sheet to load
image.onload = function() {
  ctx.drawImage(image, 0, 0);
  canvas.toBlob(function(blob) {        // get content as JPEG blob
    file = new File([blob], 'photo.jpg', {type: 'image/jpeg'});
  }, 'image/jpeg', 0.75);
}
image.crossOrigin = '';
image.src = 'https://upload.wikimedia.org/wikipedia/commons/9/9a/Gull_portrait_ca_usa.jpg';
  
document.getElementById('share').addEventListener('click', event => {
  // var file = new File([blob], 'photo.jpg', {type: 'image/jpeg'});
  var filesArray = Object.freeze([
    file
  ]);
  var data = Object.freeze({
      files: filesArray,
      title: 'Vacation Pictures',
      text: 'Photos from September 27 to October 14.',
  });
  debugger;
  if (navigator.share) {
    navigator.share(data)
      .then(() => alert('Share was successful.'))
      .catch((error) => alert('Sharing failed: ' + error));
  } else {
    alert(`Your system doesn't support sharing files.`);
  }
});
</script>