STACKOVERFLOW VERSION | AJAX | JS | DRAWING | WORKING

by Nick Hulea

HTML

<canvas   style='position: absolute; top: 0;left: 0;' id="canvas1" width="500" height="500"></canvas>
<canvas style='position: absolute;top: 0;left: 0;' id="canvas2" width="500" height="500"></canvas>

JavaScript

var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
var can2 = document.getElementById("canvas2");
var ctx2 = can2.getContext("2d");

var img = new Image();
img.onload = function () { ctx.drawImage(img,0,0); };
img.src = "http://placekitten.com/500/500";

ctx2.fillStyle='#000';
ctx2.fillRect(0,0,500,500);
ctx2.globalCompositeOperation = 'destination-out';

function clearThis(x,y) {
    console.log('toto');
    ctx2.fillStyle='#F00000';
    ctx2.beginPath();
    ctx2.arc(x, y, 70, 0, Math.PI * 2, true);
    ctx2.fill();
}

var mouse = {
    x: 0,
    y: 0,
    down: false
};

function setupMouse(canvas, onMouseDown, preventDefault) {
    var rectLeft, rectTop;
    var hook = canvas.addEventListener.bind(canvas);
    var mouseDown = updateMouseStatus.bind(null, true) ;
    var mouseUp = updateMouseStatus.bind(null, false) ;
    hook('mousedown', mouseDown);
    hook('mouseup', mouseUp);
    hook('mousemove', updateCoordinates);
    hook('scroll', updateRect);
    // var mouseOut = function() { mouse.down=false ; } ;
    // hook('mouseout', mouseOut); 
    function updateMouseStatus(b, e) {
        mouse.down = b;
        updateCoordinates(e);
        if (preventDefault) {
           e.stopPropagation();
           e.preventDefault();
        }
    }
    function updateCoordinates(e) {
        mouse.x = (e.clientX - rectLeft) ;
        mouse.y = (e.clientY - rectTop) ;
        if (mouse.down) onMouseDown(mouse.x, mouse.y);
    }
    function updateRect() {
        var rect = canvas.getBoundingClientRect();
        rectLeft = rect.left;
        rectTop = rect.top;
    }
    updateRect();
};

setupMouse(can2, clearThis, true);