JSFiddle - React, Tailwind, and code Playground

HTML

<img...

CSS

img,
canvas {
    vertical-align: middle;
}

JavaScript

var img = document.querySelector('img');

var canvas = document.createElement('canvas');
var canvasCtx = canvas.getContext('2d');

var tmpImg = new Image();

var zoom = 5;

canvas.width = 100;
canvas.height = 100;

canvasCtx.webkitImageSmoothingEnabled = false;
canvasCtx.mozImageSmoothingEnabled = false;
canvasCtx.imageSmoothingEnabled = false;

tmpImg.onload = function()
{
    img.addEventListener('mousemove', draw);
    
    function draw(event)
    {
        canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
        canvasCtx.drawImage(img, -(event.pageX*zoom)+canvas.width/2, -(event.pageY*zoom)+canvas.height/2, img.width*zoom, img.height*zoom);
        
        img.style.cursor = 'url('+ canvas.toDataURL() +') '+ canvas.width/2 +' '+ canvas.height/2 +', none';
    };
};

tmpImg.src = img.src;