diff --git a/.gitignore b/.gitignore
index 4d19566..b80fd1e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -2,3 +2,4 @@ package-lock.json
 *.DS*
 tmp/*
 # node_modules
+db
diff --git a/public/index.html b/public/index.html
index 50161c8..4304a40 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,7 +25,7 @@
 
 		<script type="text/javascript" canvas="touch-me">
 		// defaults
-		
+
 		var path;
 		var hidden = [];
 		var undoAll = false;
@@ -68,13 +68,31 @@
 		// prevent right click to avoid pop-up menu
 		document.addEventListener('contextmenu', event => event.preventDefault());
 
+		// // detect pointer type (for debugging)
+		// document.addEventListener('pointerdown', function(event) {
+		//   // Call the appropriate pointer type handler
+		//   switch (event.pointerType) {
+		//     case 'mouse':
+		//       console.log("mouse")
+		//       break;
+		//     case 'pen':
+		//       console.log("pen")
+		//       break;
+		//     case 'touch':
+		//       console.log("touch")
+		//       break;
+		//     default:
+		//       console.log(`pointerType ${event.pointerType} is not suported`);
+		//   }
+		// }, false);
+
 		function undo(fromSocket = false) {
 			// stop if there is nothing left to undo
 			if (paper.project.layers[defaultLayer].children.length < 1) {
 				return;
 			}
 
-		
+
 			if (socketsActive && !fromSocket) {
 				socket.emit('undo', paper.project.layers[defaultLayer].children.length - 1, function(success) {
 					if (success) {
@@ -336,7 +354,7 @@
 				});
 
 				function drawPathFromData(index, json_string){
-					
+
 					paper.project.layers[defaultLayer].insertChild(index, paper.importJSON(json_string));
 				}
 
@@ -388,7 +406,7 @@
 					paper.view.draw();
 				})
 
-				
+
 			};
 
 			// display default size/color of the stroke in the menu
@@ -443,14 +461,14 @@
 
 			// setup hammer.js for the main canvas
 			mc = new Hammer.Manager(canvas);
-			
+
 			// add listener (else we won't get nearly as many events)
 			var pan = new Hammer.Pan({ pointers: 1 });
 			mc.add(pan);
 
 
 			/*
-			 *	 ACTIONS RELATED TO DRAWING 
+			 *	 ACTIONS RELATED TO DRAWING
 			 */
 
 
@@ -493,7 +511,7 @@
 					// console.log("middleDraw", lastIndex, paper.project.layers[defaultLayer].children[lastIndex]);
 					// console.log("start middle draw");
 				}
-				console.log("middleDraw " + lastIndex, ev.center);
+				// console.log("middleDraw " + lastIndex, ev.center);
 				// take action on the pointer moving
 
 				// wait to get our index before touching anything
@@ -539,9 +557,9 @@
 			}
 
 			/*
-			 *	 ACTIONS RELATED TO ERASING 
+			 *	 ACTIONS RELATED TO ERASING
 			 */
-			
+
 			function startErase(ev, bigErase = false) {
 				if (debug) {
 					console.log("startErase", bigErase);
@@ -560,7 +578,7 @@
 						strokeCap: 'round',
 						fullySelected: false
 					});
-					
+
 				} else {
 					// remember that this is the last action that we started
 					lastAction = 'bigErase';
@@ -615,15 +633,15 @@
 				}
 			}
 
-			function endErase(ev, bigErase = false) {	
+			function endErase(ev, bigErase = false) {
 				if (debug) {
 					console.log("endErase " + lastIndex + " isLastIndex+end(Draw)");
-				}	
+				}
 
 				// wait to get our index before touching anything
 				if (lastIndex == -1) {
 					return;
-				}		
+				}
 
 				if (socketsActive) {
 					socket.emit('endDraw', lastIndex, paper.project.layers[defaultLayer].children[lastIndex], true);
@@ -637,11 +655,11 @@
 				finishErase(lastIndex);
 			}
 
-			
+
 
 
 			/*
-			 *	 ACTIONS RELATED TO PANNING 
+			 *	 ACTIONS RELATED TO PANNING
 			 */
 
 			 function startPan(ev) {
@@ -721,9 +739,16 @@
 			});
 
 			function startFirstAction(ev) {
+
+				evMaxPointers = ev.maxPointers;
 				lastNumPointers = ev.maxPointers;
 
-				switch (ev.maxPointers) {
+				// override evMaxPointers for surface pen erase event
+				if (ev.srcEvent.buttons === 32) {
+					evMaxPointers = 2
+				}
+
+				switch (evMaxPointers) {
 					case 1:
 						startDraw(ev);
 					break;
@@ -750,6 +775,11 @@
 					return;
 				}
 
+				// override lastAction for surface pen erase event
+				if (ev.srcEvent.buttons === 32) {
+					lastAction = "erase"
+				}
+
 				switch (lastAction) {
 					case 'draw':
 						middleDraw(ev);
@@ -757,6 +787,7 @@
 
 					case 'bigErase':
 					case 'erase':
+
 						middleErase(ev);
 					break;
 
diff --git a/public/js/hammer.js b/public/js/hammer.js
index a5cfe35..e97dce5 100644
--- a/public/js/hammer.js
+++ b/public/js/hammer.js
@@ -894,6 +894,14 @@ inherit(PointerEventInput, Input, {
                 store.push(ev);
                 storeIndex = store.length - 1;
             }
+        } else if (eventType & INPUT_START && (ev.buttons === 32 || isTouch)) {
+            // accepting alternative input method
+            // e.g., ev.buttons === 32 will be true if surface pen erase detected 
+            console.log("simulating erase action")
+            if (storeIndex < 0) {
+                store.push(ev);
+                storeIndex = store.length - 1;
+            }
         } else if (eventType & (INPUT_END | INPUT_CANCEL)) {
             removePointer = true;
         }