wipe me off

by Lingjia Liu

HTML

<div id="background">
    <canvas id="mask" width="400" height="300">
    </canvas>
</div>

CSS

#background {
    width: 400px;
    height: 300px;    
}

.img {
    background-image: url('http://i.imgur.com/KBfOZ.png');
    background-position: center;
    background-size: cover;
}

JavaScript

var background = document.getElementById("background");
var canvas = document.getElementById("mask");
var ctx = canvas.getContext('2d');

var getUserPos = function(canvas, evt) {
    var user;
    switch(event.type){
        case "mousedown":
        case "mousemove":
            user = evt;
            break;
        case "touchstart":
        case "touchmove":
            user = evt.targetTouches[0];
    }

    var rect = canvas.getBoundingClientRect();
    return {
        x: user.clientX - rect.left,
        y: user.clientY - rect.top
    };
}

var matrix = [];
var rows = 10;
var cols = 10;
var tileWidth = 400/cols;
var tileHeight = 300/rows;

// load image
var img = new Image();
img.src = 'http://i.imgur.com/utyEU.png';
img.onload = function() {
    // setup mask
    ctx.drawImage(img,0,0);
    
    // show background image
    background.className = "img";
    
    // important! set composite operation
    ctx.globalCompositeOperation = "destination-out";  
    
    // reset matrix
    for(var r=0;r<rows;r++) {
        matrix[r] = [];
        for(var c=0;c<cols;c++) {
            matrix[r][c] = 0;
        }
    }
}

var drawing = false;

var startDraw = function(event) {
    var pos = getUserPos(canvas, event);
    
    drawing = true;
    lastPos = null;
    ctx.beginPath();
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.lineWidth = 30;
    ctx.moveTo(pos.x, pos.y);
};



var doDraw = function(event) {
    if(drawing) {
        var pos = getUserPos(canvas, event);
          
        ctx.lineTo(pos.x, pos.y);
        ctx.stroke();

        var row = Math.floor(pos.y/tileHeight);
        var col = Math.floor(pos.x/tileWidth);
        matrix[row][col] = 1;
    }
    
    event.preventDefault();
};

var endDraw = function(event) {
    if(!drawing)
        return;
    
    drawing = false;
    
    // calculate matrix
    var count = 0;
    for(var r=0;r<rows;r++) {
        for(var c=0;c<cols;c++) {
            if(matrix[r][c] === 1)
           ...