JSFiddle - React, Tailwind, and code Playground

by enhzflep

HTML

<img id='srcImg'/>
<canvas id='lensCanvas'>Canvas not available if you see this</canvas>
<canvas id='preview'></canvas>
<canvas id='preview2'></canvas>

CSS

#lensCanvas
{
	position: absolute;
	z-index: 2;
	cursor: crosshair;
}

JavaScript

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


window.addEventListener('load', mInit, false);

//var LENS_WIDTH = 128;	// 150
//var LENS_ZOOM  = 40;
var LENS_WIDTH = 128;	// 150
var LENS_ZOOM  = 48;
var lensArray;// = new Array(LENS_WIDTH * LENS_WIDTH);
var	imgWidth, imgHeight;

function createSrcImage()
{
	var x, y, imgWidth, imgHeight;
	var can, ctx;
	can = newEl('canvas');
	can.width = can.height = 256;
	ctx = can.getContext('2d');
	ctx.fillStyle = "orange";
	ctx.fillRect(0,0, can.width, can.height);
	ctx.lineStyle = "#33DD33";
	for (y=0; y<can.height; y+=16)
	{
		ctx.beginPath();
		ctx.moveTo(0, y);
		ctx.lineTo(can.width, y);
		ctx.closePath();
		ctx.stroke();
	}

	ctx.beginPath();
	for (x=0; x<can.width; x+=16)
	{
		ctx.moveTo(x, 0);
		ctx.lineTo(x, can.height);
	}
	ctx.stroke();
	ctx.closePath();
	
	var mImg = byId('srcImg');
	mImg.src = can.toDataURL();
}

//byte lens
function mInit()
{
	createSrcImage();

	lensArray = new Array(LENS_WIDTH * LENS_WIDTH);
	var prev = byId('preview'), prev2 = byId('preview2');
	prev.width = prev.height = LENS_WIDTH;
	prev2.width = prev2.height = LENS_WIDTH;
	
	var width, height, img, canvas, ctx;
	img = byId('srcImg');
	imgWidth = img.width;
	imgHeight = img.height;
	canvas = byId('lensCanvas');
	canvas.addEventListener('mousemove', onCanvasMouseMove, false);
	canvas.addEventListener('mousewheel', onCanvasMouseWheel, false);
	canvas.width = imgWidth;
	canvas.height = imgHeight;
	
	canvas.setAttribute('style', 'left: '+img.offsetLeft+'px;top: ' + img.offsetTop + 'px;');
	canvas = byId('lensCanvas');

    var r = LENS_WIDTH/2;
    var d = LENS_ZOOM;
	var x, y, lensX, lensY;
    /* it is sufficient to generate 1/4 of the lens and reflect this
     * around; a sphere is mirrored on both the x and y axes */
    for (y = 0; y<(LENS_WIDTH>>1); y++) 
	{
        for (x = 0; x<(LENS_WIDTH>>1); x++) 
		{
            var ix, iy, offset;
			
            if ( (x*x + y*y) <...