Canvas scratcher

by viksra

HTML

<canvas id="demo" width=171 height=171></canvas>
<br />
<button id="reset">Reset</button>

CSS

#demo {
    background:url(http://i.imgur.com/5aKCh46.jpg) no-repeat left top;
    cursor:crosshair;
}

JavaScript

var ctx = $('#demo')[0].getContext('2d'),
    img = new Image,
    isDown = false,
    radius = 5;

/// setup logic

$(img).on('load', function() {
    $('#demo').on('mousedown', function(e) {
        isDown = true;
        erase(getXY(e));
    })
    .on('mousemove', function(e) {
        if (isDown) erase(getXY(e));
    });
    $(window).on('mouseup', function(e) {
        isDown = false;
    });
    
    $('#reset').on('click', function() {
        ctx.globalCompositeOperation = 'source-over';
        ctx.drawImage(img, 0, 0);
        ctx.globalCompositeOperation = 'destination-out';
    });

    ctx.drawImage(img, 0, 0);
    ctx.globalCompositeOperation = 'destination-out';
});
img.src = 'http://i.imgur.com/xalNmf5.jpg';

function getXY(e) {
    var r = $('#demo')[0].getBoundingClientRect();
    return {x: e.clientX - r.left, y: e.clientY - r.top};
}

function erase(pos) {
    ctx.beginPath();
    ctx.arc(pos.x, pos.y, radius, 0, 0.75 * Math.PI);
    ctx.closePath();
    ctx.fill();
}