HW3 done

hw3/Claudio_Maggioni/scripts/app.js

@@ -29,6 +29,7 @@ class App {
       if (this.buttons.clear)
         this.buttons.clear.addEventListener('click', () => {
           this.erase();
+          this.background = null;
           history.clear();
         });
 
@@ -37,6 +38,7 @@ class App {
 
       if (this.buttons.camera)
         this.buttons.camera.addEventListener('click', () => {
+          player.srcObject.getVideoTracks().forEach(track => track.stop());
           const base64 = this.canvas.toDataURL();
           const img = document.createElement('img');
           img.src = base64;
@@ -45,6 +47,35 @@ class App {
           this.favourites.appendChild(img);
           this.favourites.appendChild(span);
         });
+
+      const player = document.createElement('video');
+      player.addEventListener('loadeddata', () => {
+        const imgCanvas = document.createElement('canvas');
+        imgCanvas.width = this.canvas.width;
+        imgCanvas.height = this.canvas.height;
+        const imgCtx = imgCanvas.getContext('2d');
+        imgCtx.drawImage(player, 0, 0, canvas.width, canvas.height);
+        const img = document.createElement('img');
+        img.src = imgCanvas.toDataURL();
+        img.addEventListener('load', () => {
+          this.background = img;
+          this.redrawAll();
+        });
+
+        player.srcObject.getVideoTracks().forEach(track => track.stop());
+      });
+
+      const button = document.createElement('button');
+      button.type = 'button';
+      button.innerHTML = 'Photo';
+      button.addEventListener('click', () => {
+        navigator.mediaDevices.getUserMedia({ video: true })
+          .then((stream) => {
+            player.srcObject = stream;
+          });
+      });
+
+      document.getElementById('left-toolbar').appendChild(button);
     }
 
     this.ctx.lineWidth = 1;
@@ -59,6 +90,15 @@ class App {
       brushToolbar.appendChild(b);
     }
 
+    const label = document.createElement('label');
+    label.setAttribute('for', 'color');
+    const color = document.createElement('input');
+    color.type = 'color';
+    color.name = 'color';
+    color.addEventListener('change', () => this.strokeStyle = color.value);
+    brushToolbar.appendChild(label);
+    brushToolbar.appendChild(color);
+
     this.canvas.addEventListener('mousedown', this.startPath.bind(this));
     this.canvas.addEventListener('mousemove', this.draw.bind(this));
     this.canvas.addEventListener('mouseup', this.endPath.bind(this));
@@ -98,7 +138,8 @@ class App {
 
     if (record) {
       history.initializeNewPath();
-      history.push(new Stroke(this.brush, e.offsetX, e.offsetY));
+      history.push(new Stroke(this.brush, this.strokeStyle,
+        e.offsetX, e.offsetY));
     }
 
     this.mousedown = true;
@@ -109,7 +150,8 @@ class App {
       this._brush.draw(this.ctx, this.strokeStyle, e.offsetX, e.offsetY);
 
       if (record) {
-        history.push(new Stroke(this.brush, e.offsetX, e.offsetY));
+        history.push(new Stroke(this.brush, this.strokeStyle,
+          e.offsetX, e.offsetY));
       }
 
       if (beginNew) {
@@ -128,8 +170,10 @@ class App {
   drawPath(path) {
     const last = path.length - 1;
     const lastBrush = this.brush;
+    const lastStyle = this.strokeStyle;
     for (let i = 0; i <= last; i++) {
       this.brush = path[i].brushName;
+      this.strokeStyle = path[i].strokeStyle;
       switch(i) {
         case 0:    this.startPath(path[i], false); break;
         case last: this.endPath(path[i], false); break;
@@ -137,6 +181,17 @@ class App {
       }
     }
     this.brush = lastBrush;
-  }
+    this.strokeStyle = lastStyle;
   }
 
+  redrawAll() {
+    this.erase();
+    if (this.background) {
+      this.ctx.drawImage(this.background, 0, 0, this.canvas.width,
+        this.canvas.height);
+    }
+    for (const path of history.paths) {
+      this.drawPath(path);
+    }
+  }
+}

hw3/Claudio_Maggioni/scripts/undo.js

@@ -7,10 +7,7 @@ const history = {
 history.pop = (app) => {
   if (history.paths.length == 0) return;
   history.paths.pop();
-  app.erase();
-  for (const path of history.paths) {
-    app.drawPath(path);
-  }
+  app.redrawAll();
 };
 
 history.initializeNewPath = () => {
@@ -31,8 +28,9 @@ history.clear = () => {
 
 
 class Stroke {
-  constructor(brushName, x, y) {
+  constructor(brushName, strokeStyle, x, y) {
     this.brushName = brushName;
+    this.strokeStyle = strokeStyle;
     this.offsetX = x;
     this.offsetY = y;
   }