试图在帆布上制作鱼眼镜头效果，但有些不对劲

Question

我的例子： http://jsfiddle.net/techsin/71tfukjf/7/

我正在做的是复制放大的画布并粘贴它们。放大倍数不是线性的，以获得鱼眼效果。

然而，我不知道发生了什么，因为它看起来不像鱼眼效果。

我想要的效果可以在本文中看到，即使它使用了一种可能更好的性能，难度和可靠性的不同技术，它只是我没有得到它所以我使用我可以出现的用。

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);
}