title: Trying to make fish eye lens effect in canvas, but something is wrong
body: <p><strong>My example:</strong> <a href="http://jsfiddle.net/techsin/71tfukjf/7/" rel="nofollow">http://jsfiddle.net/techsin/71tfukjf/7/</a></p>
  
  <p>What i am doing is making copies of magnified canvas and pasting them over. Magnification isn't linear to get fish eye effect.</p>
  
  <p>However, i don't know what is happening as it doesn't look like fish eye effect at ALL.</p>
  
  <p>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. </p>
  
  <p><a href="http://www.soundstep.com/blog/2012/04/25/javascript-displacement-mapping/" rel="nofollow">http://www.soundstep.com/blog/2012/04/25/javascript-displacement-mapping/</a></p>
  
  <pre><code>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 = $("&lt;canvas&gt;")
      .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&gt;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);
  }
  </code></pre>