JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
            <canvas id="panel" width=1200 height=680></canvas>
</div>

JavaScript

//variables
var canvas, ctx;
var image;
var iMouseX, iMouseY = 1;
var bMouseDown = false;
var iZoomRadius = 150;
var iZoomPower = 3;

//drawing functions
function clear() { // clear canvas function
	ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
var r = false;

function drawScene() { // main drawScene function
		clear(); // clear canvas

	if (bMouseDown) { // drawing zoom area
		ctx.drawImage(image, 0 - iMouseX * (iZoomPower - 1), 0 - iMouseY * (iZoomPower - 1), ctx.canvas.width * iZoomPower, ctx.canvas.height * iZoomPower);
		ctx.globalCompositeOperation = 'destination-atop';

		var oGrd = ctx.createRadialGradient(iMouseX, iMouseY, 0, iMouseX, iMouseY, iZoomRadius);
		oGrd.addColorStop(0.8, "rgba(0, 0, 0, 1.0)");
		oGrd.addColorStop(1.0, "rgba(0, 0, 0, 0.1)");
		ctx.fillStyle = oGrd;
		ctx.beginPath();
		ctx.arc(iMouseX, iMouseY, iZoomRadius, 0, Math.PI*2, true); 
		ctx.closePath();
		ctx.fill();
	}

	// draw source image
		ctx.drawImage(image, 0, 0, ctx.canvas.width, ctx.canvas.height);
}

$(function(){
	// loading source image
	image = new Image();
	image.onload = function () {
		drawScene();
	}
	image.src = 'https://www.script-tutorials.com/demos/167/images/image.jpg';

	// creating canvas object
	canvas = document.getElementById('panel');
	ctx = canvas.getContext('2d');

	$('#panel').mousemove(function(e) { // mouse move handler
		var canvasOffset = $(canvas).offset();
		iMouseX = Math.floor(e.pageX - canvasOffset.left);
		iMouseY = Math.floor(e.pageY - canvasOffset.top);
		drawScene();
	});

	$('#panel').mousedown(function(e) { // binding mousedown event
		bMouseDown = true;
	});

	$('#panel').mouseup(function(e) { // binding mouseup event
		bMouseDown = false;
	});

//	setInterval(drawScene, 30); // loop drawScene
});