Is there any way to make the edited image downloadable in javascript

Hi I am making a web app that takes a normal image and helps you to edit it.

> > This is the function for applying the filters on the user image.
function applyFilter() {
  var computedFilters = "";
  controls.forEach(function (item) {
    computedFilters +=
      item.getAttribute("data-filter") +
      "(" +
      item.value +
      item.getAttribute("data-scale") +
      ") ";
  });
  image.style.filter = computedFilters;
  downloadableImage.style.filter = computedFilters;
}

> > > Here I am adding the eventListener for showing the live editing image to the user.
userFile.addEventListener("change", function () {
  const reader = new FileReader();

  reader.addEventListener("load", () => {
    localStorage.setItem("userImage", reader.result);
    image.setAttribute("src", localStorage.getItem("userImage"));
    downloadableImage.setAttribute("src", reader.result);
    downloadLink.setAttribute("href", localStorage.getItem("userImage"));
  });
  reader.readAsDataURL(this.files[0]);
});

I want to make the image that is downloadable to be edited according to the user.