eraser

css/main.less

@@ -128,7 +128,6 @@ header {
   height: 100%;
   width: 15rem;
   background: #262626;
-  display: table;
   position: absolute;
   left: -15rem;
   top: 5rem;
@@ -216,8 +215,8 @@ header {
     margin-top: 1rem;
   }
   .bottom {
-    display: table-row;
+    position: absolute;
-    vertical-align: bottom;
+    bottom: 5rem;
     button {
       margin-left: 3.5rem;
     }

index.html

@@ -90,6 +90,7 @@
           <li><label><span>Fur</span></label></li>
           <li><label><span>Pen</span></label></li>
           <li><label><span>Line</span></label></li>
+          <li><label><span>Eraser</span></label></li>
         </ol>
       </section>
       <menu>

js/events.js

@@ -53,7 +53,9 @@ function save() {
   }).on('mouseup', function(e) {
     e.preventDefault();
     window.active = false;
-
+  
+  
+    if( settings.type = 'eraser' ) return;
     if(window.points.history.last < window.points.history.length-1) {
       window.points.history.splice(window.points.history.last+1);
     }

js/functions.js

@@ -45,12 +45,6 @@ function line(x1, y1, x2, y2, opts, overlay) {
   if( opts.fill ) c.fill();
 }
 
-function erase(x1, y1, x2, y2, overlay) {
-  var c = window.c;
-  if( overlay ) var c = window.o;
-  c.clearRect(x1, y1, x2 - x1, y2 - y1);
-}
-
 function undo() {
   var history = window.points.history;
   if( history.last > 1 ) {
@@ -117,7 +111,7 @@ function startPoint(x, y) {
     window.o.fill();
   }
 
-  if( old.type == 'line' ) {
+  if( old.type == 'line' && current.type == 'line' ) {
     if( points[points.indexOf(old)-1].type !== 'line' ) erase(old.x-5, old.y-5, old.x+5, old.y+5, true);
     line(old.x, old.y, x, y);
   }
@@ -188,6 +182,20 @@ function drawPoint(x,y) {
       }
       break;
     }
+    case 'eraser': {
+      c.globalCompositeOperation = 'destination-out';
+      line(capture.x, capture.y, x, y);
+
+      var current = {
+        x : x,
+        y : y,
+        start : capture.start,
+        type : capture.type
+      }
+
+      points.push(current);
+      break;
+    }
   }
 }
 

js/main.js

@@ -18,7 +18,7 @@ $(document).ready(function() {
   window.points.history = [{ data: c.createImageData($c.width(), $c.height()), points: []}];
 
   sizeAndPos();
-  $(window).resize(sizeAndPos);
+  //$(window).resize(sizeAndPos);
 
   $('.color-picker').change(function() {
     var c = $(this).find('.color').val();

js/mobile-events.js

@@ -32,13 +32,13 @@ function save() {
   var pics = navigator.getDeviceStorage('pictures');
   var r = pics.addNamed(file, save['file name'] + '.png');
   r.onsuccess = function() {
-    alert('Your sketch was successfuly saved to pictures/' + this.result.name); 
+    alert('Your sketch was successfuly saved to ' + this.result); 
   }
   r.onerror = function() {
     alert('Something bad happened when we tried to save your file\n Possible problems: \n Duplicate name \n Permission problems')
     console.warn(this.error);
   }
-  c.putImageData(window.points.history[window.points.history.length-1].data, 0, 0);
+  c.putImageData(window.points.history[window.points.history.last].data, 0, 0);
 }
 
   $('.menu').on('tap', function() {
@@ -61,6 +61,8 @@ function save() {
     e.preventDefault();
     window.active = false;
 
+    if( settings.type == 'eraser' ) return;
+
     if(window.points.history.last < window.points.history.length-1) {
       window.points.history.splice(window.points.history.last+1);
     }
@@ -111,7 +113,7 @@ function save() {
       if( i > 0 ) {
         var key = $(this).html().toLowerCase();
         var value = $(this).parent().find('ol:nth-of-type('+i+') li[aria-selected] span').html();
-        if( key !== 'file name' ) value = key.toLowerCase();
+        if( key !== 'file name' ) value = value.toLowerCase();
         
         window[v][key] = value;
       }

manifest.webapp

@@ -25,6 +25,9 @@
       "description": "برنامه‌ی رایگان طراحی/نقاشی"
     }
   },
+  "orientation": [
+    "portrait"
+  ],
   "permissions": {
     "device-storage:pictures": {
       "description": "Required to save sketched pics",