Canvas zoom based on SO

by techsin

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").on({
	'mouseenter': function(e) {
		showLens = true;
	},
	'mousemove': function(e) {
		mouse.x = e.offsetX;
		mouse.y = e.offsetY;
	},
	'mouseleave': function(e) {
		showLens = false;
	}
})[0];
var m_can = $("<canvas>").attr({
	'width': can.width,
	'height': can.height
})[0];
var x_can = $("<canvas>").attr({
	'width': 100,
	'height': 100
})[0];

var ctx = can.getContext("2d"); // lens effect
var m_ctx = m_can.getContext('2d'); // background image
var x_ctx = x_can.getContext('2d'); // temp for fisheye

//x_ctx.fillStyle = "#FF0000";
//x_ctx.fillRect(0,0,100,100);

var mouse = {x:0, y:0};
var showLens = false;
var img = new Image();
var url = "https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xfa1/t31.0-8/1402232_657209467733905_8046320707151453573_o.jpg";

img.onload = function init() {
    putBg();
    animate();
};
img.crossOrigin = '';
img.src = url;

function animate() {
    draw();
    requestAnimationFrame(animate);
}
function draw() {
	ctx.drawImage(m_can, 0, 0);
	if(showLens) {
		// scaledSquare(3, 100);
		fisheye(100);
	}
}
function scaledSquare(xt,h) {
    var mx = mouse.x, my = mouse.y;
    
    ctx.drawImage(m_can,
		mx - h/xt/2, my - h/xt/2, //sx,st Source image sub-rectangle Left,Top coordinates.
		h/xt, h/xt, //sw/sh Source image sub-rectangle Width,Height.
		mx - h/2, my - h/2, //dx/dy Destination Left,Top coordinates.
		h, h //dw/dh The Width,Height to draw the image in the destination canvas.
	);
}

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

function fisheye(d) {
    var mx = mouse.x, my = mouse.y;
	var srcpixels = m_ctx.getImageData(mx - d/2, my - d/2, d, d);
	var xpixels = x_ctx.getImageData(mx - d/2, my - d/2, d, d);
	fisheyeTransform(srcpixels.data, xpixels.data, d, d);
	ctx.putImageData(xpixels, mx - d/2, my - d/2);
}
function fisheyeTransform(srcData, xData, w, h) {
	/*
	 *    Fish eye effect
	 *    tejopa, 2012-04-29
	 *    http://popscan.blogspot.com
	 *    http://www.eemeli.de
	 */
	//...