circle working no paperjs

by Nick Hulea

HTML

<canvas id="canvas1"></canvas>

CSS

canvas {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}
html {
    overflow:hidden;
    position:absolute;
    top:0;
    left:0;
}

JavaScript

var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
var canArray = [];
can.width = window.innerWidth;
can.height = window.innerHeight;
can.addEventListener("mousemove", function (e) {
    var mouse = getMouse(e, can);
    canArray.push(mouse);
    setInterval(redraw(mouse), 2E3)
}, false);
can.addEventListener("mousedown", function (e) {
    img.src = "http://i.imgur.com/ESgmHof.png"
}, false);

function redraw(mouse) {
    /*
    ctx.drawImage(img, 0, 0, window.innerWidth, window.innerHeight);
    ctx.beginPath(); 
    ctx.rect(0, 0, window.innerWidth, window.innerHeight);
    for (var i = canArray.length - 1; i >= 0; i--) {
        ctx.arc(canArray[i].x, canArray[i].y, 70, 0, Math.PI * 2, true);
        ctx.clip();
        ctx.fillRect(0, 0, window.innerWidth, window.innerHeight)
    }
    */
    canArray.forEach(function(entry) {
    console.log(entry);
    });
}
var img = new Image;
img.onload = function () {
    redraw({
        x: -window.innerWidth,
        y: -window.innerHeight
    })
};
img.src = "http://placekitten.com/500/500";
$(window).resize(function () {
    can.width = window.innerWidth;
    can.height = window.innerHeight;
    redraw(mouse)
});

function getMouse(e, canvas) {
    var element = canvas,
        offsetX = 0,
        offsetY = 0,
        mx, my;
    if (element.offsetParent !== undefined) {
        do {
            offsetX += element.offsetLeft;
            offsetY += element.offsetTop
        } while (element = element.offsetParent)
    }
    mx = e.pageX - offsetX;
    my = e.pageY - offsetY;
    return {
        x: mx,
        y: my
    }
};