circle working no paperjs

by Nick Hulea

HTML

<canvas id="canvas1" width="500" height="500"></canvas>

JavaScript

var can = document.getElementById("canvas1");
var ctx = can.getContext("2d");
/* DEBOUCE NOT IN USE 
var debounce = function (func, threshold, execAsap) {
    var timeout;
    return function debounced() {
        var obj = this,
            args = arguments;

        function delayed() {
            if (!execAsap) func.apply(obj, args);
            timeout = null
        }
        if (timeout) clearTimeout(timeout);
        else if (execAsap) func.apply(obj, args);
        timeout = setTimeout(delayed, threshold || 100)
    }
};
*/
can.addEventListener("mousemove", function (e) {
    var mouse = getMouse(e, can);
    requestAnimationFrame(function () {
        redraw(mouse);
        console.log(mouse)
    })
}, false);
var m = [];

function redraw(mouse) {
    m.push(mouse);
    m.forEach(function (a) {
        ctx.drawImage(img, 0, 0);
        ctx.beginPath();
        ctx.rect(0, 0, 500, 500);
        ctx.arc(a.x, a.y, 70, 0, Math.PI * 2, true);
        ctx.clip();
        ctx.fillRect(0, 0, 500, 500)
    })
}
var img = new Image;
img.onload = function () {};
img.src = "http://placekitten.com/500/500";

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
    }
}
/*USING rAF NOW STILL NOT WORKING*/
if (!window.requestAnimationFrame) window.requestAnimationFrame = function () {
    return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback, element) {
        window.setTimeout(callback, 1E3 / 60)
    }
}();