another attempt to make download

main.js

@@ -31,8 +31,8 @@ settings.addHandler(panel.toggle.bind(panel));
 let clear = new Button("blank");
 clear.addHandler(canvas.clear.bind(canvas));
 
-let downloadButton = new Button("download");
-downloadButton.addHandler(download);
+let downloadButton = new Button("download", true);
+downloadButton.element.download = "fantasy.png";
 
 window.addEventListener("resize", onWindowResize, false);
 
@@ -95,6 +95,8 @@ function paint() {
         let shape = factory.createRandomShape();
         canvas.draw(shape);
     }
+
+    downloadButton.element.href = canvas.getData();
 }
 
 function adjustButtons(width) {
@@ -106,11 +108,4 @@ function adjustButtons(width) {
     settings.setPosition(c + hc + ws, 25);
     clear.setPosition(2 * c + hc + ws, 25);
     downloadButton.setPosition(3 * c + hc + ws, 25);
-}
-
-function download() {
-    let data = canvas.getData();
-    let prev = window.location.href;
-    window.location.href = data.replace("image/png", "image/octet-stream");
-    window.location.href = prev;
 }

style.css

@@ -9,7 +9,7 @@ body {
     box-sizing: border-box;
 }
 
-button {
+.button {
     z-index: 2;
     overflow: hidden;
     background-color: #00b6ff;
@@ -28,7 +28,7 @@ button {
     transition: background-color 0.2s;
 }
 
-button:hover {
+.button:hover {
     background-color: #2eceff;
 }
 

ui/button.js

@@ -1,10 +1,19 @@
 import UI from "./ui.js";
 
 class Button extends UI {
-    constructor(image) {
-        super(document.createElement("button"), Button.width, Button.height);
+    constructor(image, isRef) {
+        isRef = isRef !== false;
+        let element;
+        if (isRef) {
+            element = document.createElement("a");
+            element.href = "#";
+        } else {
+            element = document.createElement("button");
+        }
+        super(element, Button.width, Button.height);
 
         this.element.classList.add("shadow");
+        this.element.classList.add("button");
         this.element.style.backgroundImage = "url(images/" + image + ".svg)";
         this._boundClick = this._onClick.bind(this);
         this.element.addEventListener("click", this._boundClick, false);