How to make html div with text over image downloadable/savable for users?

I have a div that takes a user image and places user text over it. My goal is for the users to, after seeing the preview and customizing the image/text to their like, be able to download or save the image with the click of a button. Is this possible? Here's my code: (I'm new to html/css so please forgive ugly formatting/methods)

HTML:

<script `src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>`

<p>DOM-rendered</p>
<p>&nbsp;</p>

<div id="imagewrap" class="wrap" style="border-style: solid;">
  <img src="../images/environment.gif" id="img_prev" width="640" height="640" />
  <h3 class="desc">Something Inspirational</h3>
</div>

<div id="canvasWrapper" class="outer">
  <p>Canvas-rendered (try right-click, save image as!)</p>
  <p>Or, <a id="downloadLink" download="cat.png">Click Here to Download!</a>
</div>

CSS:

.desc {
text-align: center;
}

.outer, .wrap, .html2canvas, .image_text {
  display: inline-block;
  vertical-align: top;
}
.wrap {
  text-align: center;
}
#imagewrap {
  background-color: white;
}

JavaScript:

window.onload = function() {
html2canvas(document.getElementById("imagewrap"), {
onrendered: function(canvas) {
  canvas.className = "html2canvas";
  document.getElementById("canvasWrapper").appendChild(canvas);
  var image = canvas.toDataURL("image/png");
  document.getElementById("downloadLink").href = image;
},
useCORS: true
});
}

function changePicture(image) {
    var at = $(image).attr('at');
    var newpath = '../images/' + at;
    $("#img_prev").attr('src', newpath);
}


function readURL(input) {
    if (input.files && input.files[0]) {
      var reader = new FileReader();

      reader.onload = function (e) {
        $('#img_prev')
          .attr('src', e.target.result)
          .width(640)
          .height(640);
      };
      reader.readAsDataURL(input.files[0]);
    }
  };


  $(document).on("click", '.font-names li a',  function() {    
      $("#imagewrap h3").css("font-family", $(this).parent().css("font-family"));
      $("#new_tile_font_style").val($(this).parent().css("font-family"));
   });


  $(document).on("click", '.font-sizes li a',  function() {    
      $("#imagewrap h3").css("font-size", $(this).parent().css("font-size"));
      $("#new_tile_font_size").val($(this).parent().css("font-size") + "px");
    });


  $(document).on("click", '.font-colors li a',  function() {    
      $("#imagewrap h3").css("color", $(this).parent().css("color"));
      $("#new_tile_font_color").val($(this).parent().css("color"));
    });


  $("#new_tile_quote").on('keyup', function() {
   var enteredText = $("#new_tile_quote").val().replace(/\n/g, "<br>");
    $("#imagewrap h3").html(enteredText);
    });

Solution

What you're trying to accomplish is entirely possible using just HTML, JS, and CSS, with no server-side code. Here is a simplified demo that uses the html2canvas library to render your entire DOM element to a canvas, where the user can then download it.

Be sure to click "Full page" on the demo so you can see the whole thing!

window.onload = function() {
  html2canvas(document.getElementById("imagewrap"), {
    onrendered: function(canvas) {
      canvas.className = "html2canvas";
      document.getElementById("canvasWrapper").appendChild(canvas);
      var image = canvas.toDataURL("image/png");
      document.getElementById("downloadLink").href = image;
    },
    useCORS: true
  });
}

.desc {
  text-align: center;
}
.outer, .wrap, .html2canvas, .image_text {
  display: inline-block;
  vertical-align: top;
}
.wrap {
  text-align: center;
}
#imagewrap {
  background-color: white;
}
#wow {
  color: red;
  display: block;
  transform: translate(0px, -12px) rotate(-10deg);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div class="outer">
  <p>DOM-rendered</p>
  <p>&nbsp;</p>
  <div id="imagewrap" class="wrap" style="border-style: solid;">
    <img src="https://i.imgur.com/EFM76Qe.jpg?1" id="img_prev" width="170" />
    <h3 class="desc">Something <br /><span style="color: blue;">Inspirational</span></h3>
    <span id="wow">WOW!</span>
  </div>
</div>
<div id="canvasWrapper" class="outer">
  <p>Canvas-rendered (try right-click, save image as!)</p>
  <p>Or, <a id="downloadLink" download="cat.png">Click Here to Download!</a>
</div>