Trying to make fish eye lens effect in canvas, but something is wrong

My example: http://jsfiddle.net/techsin/71tfukjf/7/

What i am doing is making copies of magnified canvas and pasting them over. Magnification isn't linear to get fish eye effect.

However, i don't know what is happening as it doesn't look like fish eye effect at ALL.

Effect that i want can be seen in this article, even though it uses a different technique that is perhaps better performance, difficulty, and reliability wise, it's just i don't get it so i am using what i could come up with.

http://www.soundstep.com/blog/2012/04/25/javascript-displacement-mapping/

var $can = $("#can"),
    can = $can[0],
    ctx = can.getContext("2d"),
    url = "https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xfa1/t31.0-8/1402232_657209467733905_8046320707151453573_o.jpg",
    img = new Image(),
    mouse = {x:0,y:0};

img.onload = init;
img.crossOrigin = '';
img.src = url;

var m_can = $("<canvas>")
    .attr("width", can.width)
    .attr("height", can.height)[0];
var m_ctx = m_can.getContext('2d');


$can.on("mousemove",function(e){
    mouse.x=e.offsetX;
    mouse.y=e.offsetY;
});

function init() {
    putBg();
    animate();
}

function animate() {
    draw();
    requestAnimationFrame(animate);
}


function draw() {
    putBg();
    copyCanvas();
    var scale = 2;

    for (var i =200,l=i; i>0; i--) {
       scaledSquare( 1+scale*Math.pow((i/l),(1/4)),i);
    }
}



function scaledSquare(xt,h) {
    var mx = mouse.x, my = mouse.y;
    ctx.save();
    ctx.scale(xt, xt);

    ctx.beginPath();
    ctx.arc( mx/xt, my/xt,(h/2)/xt,0,2*Math.PI);
    //ctx.lineWidth = 0;
    //ctx.fillStyle='green'; ctx.fill();
    ctx.clip();

    ctx.drawImage(m_can, mx-h/2,my-h/2,h/2,h/2, (mx-h/2)/xt,(my-h/2)/xt,h/2,h/2);
    ctx.restore();
}

function putBg() {
    m_ctx.drawImage(img,200,50,600,600,0,0,600,600);
}

function copyCanvas() {
    ctx.drawImage(m_can,0,0);
}