Added 'shake' to clear canvas

css/styles.css

@@ -15,7 +15,11 @@ html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address
 html { 
 	-webkit-user-select: none;
 	-webkit-tap-highlight-color: rgba(0,0,0,0);
-	-webkit-touch-callout: none; 
+	-webkit-touch-callout: none;
+}
+
+body {
+ 	overflow: hidden;
 }
 
 canvas {

index.html

@@ -15,6 +15,7 @@
 
 <!-- Main JS -->
 <script src="libs/underscore/underscore-min.js"></script>
+<script src="libs/gesture/shake.js"></script>
 <script src="main.js"></script>
 
 </head>

libs/gesture/shake.js

@@ -0,0 +1,105 @@
+/*
+ *
+ * Find more about this plugin by visiting
+ * http://miniapps.co.uk/
+ *
+ * Copyright (c) 2010-2012 Alex Gibson, http://miniapps.co.uk/
+ * Released under MIT license
+ * http://miniapps.co.uk/license/
+ *
+ */
+
+(function (window, document) {
+
+	function Shake() {
+
+		//feature detect
+		this.hasDeviceMotion = 'ondevicemotion' in window;
+
+		//default velocity threshold for shake to register
+		this.threshold = 15;
+
+		//use date to prevent multiple shakes firing	
+		this.lastTime = new Date();
+
+		//accelerometer values
+		this.lastX = null;
+		this.lastY = null;
+		this.lastZ = null;
+
+		//create custom event
+		this.event = document.createEvent('Event');
+		this.event.initEvent('shake', true, true);
+	}
+
+	//reset timer values
+	Shake.prototype.reset = function () {
+
+		this.lastTime = new Date();
+		this.lastX = null;
+		this.lastY = null;
+		this.lastZ = null;
+	};
+
+	//start listening for devicemotion
+	Shake.prototype.start = function () {
+
+		this.reset();
+		if (this.hasDeviceMotion) { window.addEventListener('devicemotion', this, false); }
+	};
+
+	//stop listening for devicemotion
+	Shake.prototype.stop = function () {
+
+		if (this.hasDeviceMotion) { window.removeEventListener('devicemotion', this, false); }
+		this.reset();
+	};
+
+	//calculates if shake did occur
+	Shake.prototype.devicemotion = function (e) {
+
+		var current = e.accelerationIncludingGravity,
+			currentTime,
+			timeDifference,
+			deltaX = 0,
+			deltaY = 0,
+			deltaZ = 0;
+
+		if ((this.lastX === null) && (this.lastY === null) && (this.lastZ === null)) {
+
+			this.lastX = current.x;
+			this.lastY = current.y;
+			this.lastZ = current.z;
+			return;
+		}
+
+		deltaX = Math.abs(this.lastX - current.x);
+		deltaY = Math.abs(this.lastY - current.y);
+		deltaZ = Math.abs(this.lastZ - current.z);
+
+		if (((deltaX > this.threshold) && (deltaY > this.threshold)) || ((deltaX > this.threshold) && (deltaZ > this.threshold)) || ((deltaY > this.threshold) && (deltaZ > this.threshold))) {
+
+			//calculate time in milliseconds since last shake registered
+			currentTime = new Date();
+			timeDifference = currentTime.getTime() - this.lastTime.getTime();
+
+			if (timeDifference > 1000) {
+				window.dispatchEvent(this.event);
+				this.lastTime = new Date();
+			}
+		}
+	};
+
+	//event handler
+	Shake.prototype.handleEvent = function (e) {
+
+		if (typeof (this[e.type]) === 'function') {
+			return this[e.type](e);
+		}
+	};
+
+	//create a new instance of shake.js.
+	var myShakeEvent = new Shake();
+	myShakeEvent.start();
+
+}(window, document));

main.js

@@ -55,6 +55,9 @@ var sketch = (function () {
 			document.addEventListener('touchmove', function(e) {
 				e.preventDefault()
 			}, false);
+
+			//shake gesture
+			window.addEventListener('shake', sketch.clearCanvas, false);
 		},
 
 		onTouchStart: function (e) {
@@ -166,6 +169,11 @@ var sketch = (function () {
 		    ctx.closePath();
 
 		    return { x: lines[id].x + moveX, y: lines[id].y + moveY };
+		},
+
+		clearCanvas: function () {
+			canvas.setAttribute("height", window.innerHeight + "px"); 
+			canvas.setAttribute("width",  window.innerWidth + "px");
 		}
 	};
 }());