erase and cursor

public/css/canvas.css

@@ -15,10 +15,15 @@ body {
   position: absolute;
   border: 1px solid black;
 }
-.board {
+.board-draw {
   position: absolute;
   border: 1px solid black;
-  cursor: url('/images/paintbrush.png'), auto;
+  cursor: url('/images/paintbrush.png') 0 45, auto;
+}
+.board-erase {
+  position: absolute;
+  border: 1px solid black;
+  cursor: url('/images/eraser-cursor.png') 5 38, auto;
 }
 .canvases {
   margin-top: 70px;
@@ -39,6 +44,15 @@ body {
   margin-left: 10px;
   vertical-align: middle;
 }
+.eraser {
+  float: left;
+  margin-top: 10px;
+  width: 50px;
+  height: 50px;
+  margin-left: 10px;
+  background: none;
+  vertical-align: middle;
+}
 .colour-palette {
   left: 50px;
   position: fixed;

public/js/angular/controller/canvasController.js

@@ -18,6 +18,8 @@ homepage.controller('CanvasController', ['$scope', 'CanvasProvider', '$timeout',
   var userObj = Parse.User.current();
   var username = userObj.get("username");
 
+  $scope.userAction = 'draw';
+
   board.height = board.width = boardSize;
   background.height = background.width = boardSize;
   new Grid(opts).draw(gridContext);
@@ -30,17 +32,24 @@ homepage.controller('CanvasController', ['$scope', 'CanvasProvider', '$timeout',
     return CanvasProvider.getCurrent()[1];
   }
 
-  function drawOn(x, y, colour) {
+  $scope.action = function () {
+    if ($scope.userAction === 'draw') {
+      $scope.userAction = 'erase';
+    } else {
+      $scope.userAction = 'draw';
+    }
+  }
+  function drawOn(action, x, y, colour) {
+    action = $scope.userAction;
     x = x || event.offsetX;
     y = y || event.offsetY;
     colour = colour || pixelColor;
-
-    boardInterface.createPixel(x, y, pixelSize, colour);
-    socket.emit('coordinates', [x, y, colour, imgID()]);
+    boardInterface.createPixel(action, x, y, pixelSize, colour);
+    socket.emit('coordinates', [action, x, y, colour, imgID()]);
   };
 
   socket.on('coordinates', function(data) {
-    boardInterface.createPixel(data[0], data[1], pixelSize, data[2]);
+    boardInterface.createPixel(data[0], data[1], data[2], pixelSize, data[3]);
   });
 
   $(board).mousedown(function() {
@@ -77,6 +86,7 @@ homepage.controller('CanvasController', ['$scope', 'CanvasProvider', '$timeout',
     var x = event.offsetX;
     var y = event.offsetY;
     pixelColor = WhatColour.pickColour(paletteCtx, x, y);
+    $scope.userAction = 'draw';
     $('.colour-palette').fadeToggle('slow');
     $('.colour-palette-toggle').fadeToggle('slow');
   })

public/js/angular/templates/canvas.html

@@ -8,22 +8,24 @@
     <button class="btn save-canvas" type="button">Save Drawing</button>
     <button class="btn chat-button" type="button">Chat</button>
     <img alt="colour palette toggle" class="colour-palette-toggle" src="images/ColorWheel-Base.png"/>
+    <img src="images/eraser.png" alt="eraser" class="eraser" ng-click="action()"/>
     <span class="img-description">{{imgDesc()}}</span>
-    <button class="btn home-button" ui-sref="home" type="button">Home</button>
+    <button class="btn home-button" type="button" ui-sref="home">Home {{userAction}}</button>
   </div>
   <section class="canvases">
     <canvas class="grid"></canvas>
-    <canvas class="board"></canvas>
+    <canvas class="board board-{{userAction}}"></canvas>
     <canvas class="colour-palette"></canvas>
   </section>
   <section class="chatroom">
     <div class="chatbox">
-    <div class="messagebox">
-      <ul class="messages"></ul>
-    </div>
-    <form class="chat">
-      <input class="msg" autocomplete="off"><button class="send-msg">Send</button>
-    </form>
+      <div class="messagebox">
+        <ul class="messages"></ul>
+      </div>
+      <form class="chat">
+        <input autocomplete="off" class="msg">
+        <button class="send-msg">Send</button>
+      </form>
     </div>
   </section>
   <p class="save-alert"></p>

public/js/pixel.js

@@ -2,23 +2,22 @@ function BoardInterface(context) {
   this.context = context;
 }
 
-BoardInterface.prototype.createPixel = function(x, y, size, pixelColor) {
+BoardInterface.prototype.createPixel = function(action, x, y, size, pixelColor) {
 
   x = Math.floor(x / size) * size;
-  y = Math.floor(y / size) * size + (3 * size); //this adjustment at the end is for the paintbrush cursor
+  y = Math.floor(y / size) * size; //this adjustment at the end is for the paintbrush cursor
 
-  PixelGenerator.createDot(this.context, x, y, size, pixelColor);
+  PixelGenerator.createDot(this.context, action, x, y, size, pixelColor);
 };
 
 var PixelGenerator = (function() {
 
-  function createDot(ctx, x, y, size, pixelColor) {
-    var colour = WhatColour.pickColour(ctx, x, y);
-    if (colour === 'rgba(0,0,0,0)') {
+  function createDot(ctx, action, x, y, size, pixelColor) {
+    if (action === 'erase') {
+      ctx.clearRect(x, y, size, size);
+    } else if (action === 'draw') {
       ctx.fillStyle = pixelColor;
       ctx.fillRect(x, y, size, size);
-    } else {
-      ctx.clearRect(x, y, size, size);
     }
   };
 

server.js

@@ -56,7 +56,7 @@ io.on('connection', function(socket) {
   });
 
   socket.on('coordinates', function(data) {
-    imgID = data[3];
+    imgID = data[4];
     socket.broadcast.to(imgID).emit('coordinates', data);
   });