JSFiddle - React, Tailwind, and code Playground

by enhzflep

HTML

<div align='center' style='display:inline-block'>
		<img id='srcImg' src='http://www.johnchapple.com/jcwp/wp-content/uploads/2012/09/photography_quotes.jpg'/>
		<div>Roll the mouse to change the zoom. Current: <span id='zoomTgt'>2.0</span>x</div>
	</div>

CSS

@font-face {
 font-family: 'Kaushanscript';
 src: url('fonts/kaushanScript.woff');
}

body, html
{
    font-family: 'Kaushanscript', cursive;
	padding: 0;
	margin: 0;
}
.zoomable, canvas
{
 }
.zoomable:hover
{
}
canvas
{
	cursor: none;
	pointer-events: none;
	z-index: 2;
}
#magGlass
{
	border-radius: 50%;
	display: none; /*'inline-block'; */
}
#magCanvas
{
	position: absolute;
	pointer-events: none;
}

JavaScript

function byId(e){return document.getElementById(e);}
function newEl(tag){return document.createElement(tag);}

var canvas, hdc, img, magGlass;
var magCanvas, magHdc, magImg;

var radius = 119/2;
var magScale = 2;

var lensDiam = 119;
var offset = 8;

var overImg = true;

// base64 encoded "magnifyingGlass-small.svg"
var svgBase64Str =...