scratcher.js.composite.diff

@@ -172,24 +171,11 @@
     Scratcher.prototype.recompositeCanvases = function () {
-        var tempctx = this.canvas.temp.getContext('2d');
-        var mainctx = this.canvas.main.getContext('2d');
-
-        // Step 1: clear the temp
-        this.canvas.temp.width = this.canvas.temp.width; // resizing clears
-
-        // Step 2: stamp the draw on the temp (source-over)
-        tempctx.drawImage(this.canvas.draw, 0, 0);
-
-        // Step 3: stamp the background on the temp (!! source-atop mode !!)
-        tempctx.globalCompositeOperation = 'source-atop';
-        tempctx.drawImage(this.image.back.img, 0, 0);
-
-        // Step 4: stamp the foreground on the display canvas (source-over)
-        mainctx.drawImage(this.image.front.img, 0, 0);
-
-        // Step 5: stamp the temp on the display canvas (source-over)
-        mainctx.drawImage(this.canvas.temp, 0, 0);
+        var can = this.canvas.main;
+        var ctx = can.getContext('2d');
+        ctx.globalCompositeOperation = 'copy';
+        ctx.drawImage(this.image.back.img, 0, 0);
+        ctx.globalCompositeOperation = 'destination-out';
     };
 
@@ -200,14 +186,15 @@
-    Scratcher.prototype.scratchLine = function (x, y, fresh) {
-        var can = this.canvas.draw;
+    Scratcher.prototype.scratchLine = function (x, y) {
+        var can = this.canvas.main;
         var ctx = can.getContext('2d');
         ctx.lineWidth = 30;
         ctx.lineCap = ctx.lineJoin = 'round';
-        ctx.strokeStyle = '#f00'; // can be any opaque color
-        if (fresh) {
+        ctx.strokeStyle = 'rgba(0,0,0,1)'; // can be any opaque color
+        if (this.fresh) {
             ctx.beginPath();
+            this.fresh = false;
             // this +0.01 hackishly causes Linux Chrome to draw a
             // "zero"-length line (a single point), otherwise it doesn't
             // draw when the mouse is clicked but not moved:

scratcher.js.mousemove.diff

         function mousemove_handler(e) {
             if (!this.mouseDown) {
                 return true;
             }

             var local = getLocalCoords(c, getEventCoords(e));
 
-            this.scratchLine(local.x, local.y, false);
-            this.recompositeCanvases();
+            this.scratchLine(local.x, local.y);
 
             return false;
         };
 
-        $(c).on('mousedown', mousedown_handler.bind(this))
-            .on('touchstart', mousedown_handler.bind(this));
 
         $(document).on('mousemove', mousemove_handler.bind(this));
         $(document).on('touchmove', mousemove_handler.bind(this));
-
-        $(document).on('mouseup', mouseup_handler.bind(this));
-        $(document).on('touchend', mouseup_handler.bind(this));

scratcher.js.setimage.diff

@@ -78,20 +78,20 @@
-    function Scratcher(canvasId, backImage, frontImage) {
+    function Scratcher(canvasId, backImage) {
         this.canvas = {
-            'main': $('#' + canvasId).get(0),
-            'temp': null,
-            'draw': null
+            'main': $('#' + canvasId).get(0)
         };
 
-        this.mouseDown = false;
+        this.fresh = true;
+
+        this.mouseDown = true;
 
         this.canvasId = canvasId;
 
         this._setupCanvases(); // finish setup from constructor now
 
-        this.setImages(backImage, frontImage);
+        this.setImages(backImage);
 
         this._eventListeners = {};
     };
@@ -99,13 +99,12 @@
-    Scratcher.prototype.setImages = function (backImage, frontImage) {
+    Scratcher.prototype.setImages = function (backImage) {
         this.image = {
-            'back': { 'url': backImage, 'img': null },
-            'front': { 'url': frontImage, 'img': null }
+            'back': { 'url': backImage, 'img': null }
         };
 
-        if (backImage && frontImage) {
+        if (backImage) {
             this._loadImages(); // start image loading from constructor now
         }
     };