I have a <canvas> element on my site, and I'd like the user to be able to download a png of the canvas. I'm converting the canvas data into a Blob with a content type of image/png and programmatically downloading it. Here's the download specific code:

function downloadBlob(blob, name) {
  const blobUrl = URL.createObjectURL(blob);
  const link = document.createElement("a");

  link.href = blobUrl;
  link.download = name; // Set filename to use when downloaded

  document.body.appendChild(link);
  link.dispatchEvent(
    new MouseEvent("click", {
      bubbles: true,
      cancelable: true,
      view: window,
    }),
  );
  document.body.removeChild(link);
}

Two questions:

1. This results in the image being opened in the same tab rather than being downloaded. How can I ensure the image downloads instead of opens in the browser?
2. I've also enabled the user to download a csv file using the same downloadBlob function above, and the file is downloading successfully. However, the filename is not the value of the download property that I've set. It's showing as 3e9a771c-43c5-44af-9907-283541ef6dd8.csv, for example, instead of name-of-file.csv. How can I get the download property to be honored?