ThumbnailBuilder

diff --git a/index.html b/index.html
index c535eb5..96a4672 100644
--- a/index.html
+++ b/index.html
@@ -46,6 +46,9 @@
 
       </div>
 
+      <div class="row">
+        <a id="download-image" download="thumbnail_generated.png" class="waves-effect waves-light btn deep-purple lighten-2"><i class="material-icons left">save</i>Download</a>
+      </div>
     </div>
 
     <div class="col m6 s12">

diff --git a/js/editCanvas.js b/js/editCanvas.js
index 898ed0e..bfd28ee 100644
--- a/js/editCanvas.js
+++ b/js/editCanvas.js
@@ -216,6 +216,18 @@ document.addEventListener('DOMContentLoaded', function() {
   instances = M.FormSelect.init(elems);
 
   draw();
+
+  document.querySelector('#download-image').addEventListener('click', function () {
+    //to png
+    var img = document.createElement('img');
+    img.src = editCanvas.toDataURL();
+    var a = document.createElement('a');
+    a.href = img.src;
+    a.download = 'thumbnail.png';
+    document.body.appendChild(a);
+    a.click();
+    document.body.removeChild(a);
+  });
 });
 
 // Helper function to get URL Query Params