eraser

js/events.js

@@ -145,13 +145,14 @@ function save() {
   }).on('mousemove', function(e) {
     if( $(this).attr('data-moving') ) {
       var x = parseInt(e.pageX - sliderLeft - 15);
-      var progress = $(this).parent().children().first();
+      var $c = $('.'+$(this).parents('div[role="slider"]').attr('class'));
+      var progress = $c.find('progress');
       var max = +progress.attr('max');
       var min = +progress.attr('min');
       if( x <= max && x >= min ) {
-        $(this).css('left', x+'%');
-        $(this).parent().find('progress').attr('value', x);
-        var key = $(this).parents('div[role="slider"]').attr('class');
+        $c.find('button').css('left', x+'%');
+        progress.attr('value', x);
+        var key = $c.attr('class');
         settings[key] = x;
         $('#'+ key +' span').html(x);
       }

js/functions.js

@@ -34,6 +34,8 @@ function line(x1, y1, x2, y2, opts, overlay) {
   var c = window.c;
   if( overlay ) var c = window.o;
   c.beginPath();
+  if( settings.type == 'eraser' ) c.globalCompositeOperation = 'destination-out';
+  else c.globalCompositeOperation = opts.composite || settings.composite;
   c.lineCap = opts.lineCap || settings.lineCap;
   c.lineJoin = opts.lineJoin || settings.lineJoin;
   c.strokeStyle = opts.color || settings.color;
@@ -129,6 +131,9 @@ function drawPoint(x,y) {
   var capture = points[points.length-1];
 
   switch(capture.type) {
+    case 'eraser': {
+      capture.type = 'pen';
+    }
     case 'pen': {
       line(capture.x, capture.y, x, y);
 
@@ -182,20 +187,6 @@ 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

@@ -11,7 +11,8 @@ $(document).ready(function() {
     lineCap: 'round',
     lineJoin: 'round',
     furLength: 5,
-    connectTelorance: 40
+    connectTelorance: 40,
+    composite: 'source-over'
   };
   window.points = [];
   window.$c = $('canvas');

js/mobile-events.js

@@ -151,13 +151,14 @@ function save() {
   }).on('touchmove', function(e) {
       if( $(this).attr('data-moving') ) {
       var x = parseInt(e.changedTouches[0].pageX - sliderLeft - 15);
-      var progress = $(this).parent().children().first();
+      var $c = $('.'+$(this).parents('div[role="slider"]').attr('class'));
+      var progress = $c.find('progress');
       var max = +progress.attr('max');
       var min = +progress.attr('min');
       if( x <= max && x >= min ) {
-        $(this).css('left', x+'%');
-        $(this).parent().find('progress').attr('value', x);
-        var key = $(this).parents('div[role="slider"]').attr('class');
+        $c.find('button').css('left', x+'%');
+        progress.attr('value', x);
+        var key = $c.attr('class');
         settings[key] = x;
         $('#'+ key +' span').html(x);
       }