JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="main" width="500" height="500"></canvas>
<canvas id="zoom" width="400" height="200" style="position:absolute; top:0; left:0; display:none"></canvas>

CSS

body{
    background-color:red;
}

#zoom{
   border:1px black solid;
   box-shadow: 5px 5px 10px #1e1e1e;
}

JavaScript

var main = document.getElementById("main");
var zoom = document.getElementById("zoom");
var ctx = main.getContext("2d")
var zoomCtx = zoom.getContext("2d");
var img = new Image();
img.src = "http://astrobioloblog.files.wordpress.com/2011/10/duck-1.jpg"
img.onload = run;

function run(){
    ctx.drawImage(img,0,0);
}

main.addEventListener("mousemove", function(e){
    console.log(e);
    zoomCtx.fillStyle = "white";
    //zoomCtx.clearRect(0,0, zoom.width, zoom.height);
    //zoomCtx.fillStyle = "transparent";
    zoomCtx.fillRect(0,0, zoom.width, zoom.height);
    zoomCtx.drawImage(main, e.x, e.y, 200, 100, 0,0, 400, 200);
    console.log(zoom.style);
    zoom.style.top = e.pageY + 10 + "px"
    zoom.style.left = e.pageX + 10 + "px"
    zoom.style.display = "block";
});

main.addEventListener("mouseout", function(){
    zoom.style.display = "none";
});