JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="can" width="700" height="700"></canvas>

CSS

/* ctx.drawImage(m_can, mx-h/2,my-h/2,h,h, mx/xt - (h/2),my/xt - (h/2),h,h);
    for paralalex effect works due to last hs.. and combinaiton.
 ctx.drawImage(m_can, mx-h/2,my-h/2,h/xt,h/xt, mx/xt - (h/2)/xt,my/xt - (h/2)/xt,h/xt,h/xt);
for effect of zoom in while get right size...need to study it more..

*/

context.save();
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth=10;
context.quadraticCurveTo(288, 288, 188, 150);
context.lineWidth=10;
context.clip();
context.drawImage(imageObj, 10, 50);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
context.fillStyle='green';
context.fill();

JavaScript

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
  },
  active;

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

/* ctx.drawImage(m_can, mx-h/2,my-h/2,h,h, mx/xt - (h/2),my/xt - (h/2),h,h);
    for paralalex effect works due to last hs.. and combinaiton.
 ctx.drawImage(m_can, mx-h/2,my-h/2,h/xt,h/xt, mx/xt - (h/2)/xt,my/xt - (h/2)/xt,h/xt,h/xt);
for effect of zoom in while get right size...need to study it more..

*/

context.save();
context.beginPath();
context.moveTo(188, 150);
context.quadraticCurveTo(288, 0, 388, 150);
context.lineWidth=10;
context.quadraticCurveTo(288, 288, 188, 150);
context.lineWidth=10;
context.clip();
context.drawImage(imageObj, 10, 50);
context.beginPath();
context.arc(centerX, centerY, radius, 0, 2 * Math.PI,...