HW19 undo

homework19/script.js

@@ -7,10 +7,14 @@ const height = canvas.height;
 let current;
 let selection = []
 
+let currentArray = [];
+
 const tools = {
     graffity: {
         mousemove(e){ //e.buttons 0b00000x11 & 0b00000100 == x
-            (e.buttons & 1) && new Circle(e.clientX, e.clientY, +size.value, color.value)
+            current = (e.buttons & 1) && new Circle(e.clientX, e.clientY, +size.value, color.value);
+            currentArray.push(current);
+            current = null;
         }
     },
     circle: {
@@ -25,6 +29,7 @@ const tools = {
         },
 
         mouseup(e){
+            currentArray.push(current)
             current = null
         }
     },
@@ -40,6 +45,7 @@ const tools = {
         },
 
         mouseup(e){
+            currentArray.push(current);
             current = null
         }
     },
@@ -57,6 +63,7 @@ const tools = {
         },
 
         mouseup(e){
+            currentArray.push(current);
             current = null
         }
     },
@@ -74,6 +81,7 @@ const tools = {
         },
 
         mouseup(e){
+            currentArray.push(current);
             current = null
         }
     },
@@ -296,4 +304,18 @@ class Ellipse extends Drawable {
         ctx.fill();
         
     }
+}
+
+let undo = document.getElementById("undo");
+undo.onclick = () =>  {
+
+    currentArray.pop()
+    ctx.clearRect(0, 0, 400, 400);
+
+    for(let key of currentArray) {
+        if (key != 0) {
+            key.draw()
+        }
+    }
+
 }