Skip to content

Instantly share code, notes, and snippets.

@elin-moco
Last active Dec 30, 2015
Embed
What would you like to do?
@@ -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:
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));
@@ -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
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment