I am creating a magnifying glass for a Canvas application that is supposed to take a canvas image snapshot and draw it onto a smaller canvas at a larger scale where the cursor coordinates are, but I have run into 2 issues.
var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
var ox = canvas.width / 2;
var oy = canvas.height / 2;
ctx.font = "42px serif";
ctx.textAlign = "center";
ctx.textBaseline = "middle";
ctx.fillStyle = "blue";
ctx.fillRect(ox / 2, oy / 2, ox, oy);
function magnify() {
var main = document.getElementById("canvas1");
var ctx = main.getContext('2d')
var base64 = main.toDataURL('image/png', 0);
drawing = new Image();
drawing.onload = () => {
var zoom = document.getElementById("tCanvas");
var zoomCtx = zoom.getContext('2d');
zoomCtx.drawImage(drawing, 0, 0);
}
main.addEventListener("mousemove", function(e) {
var zoom = document.getElementById("tCanvas");
var zoomCtx = zoom.getContext('2d');
zoomCtx.clearRect(0, 0, zoom.width, zoom.height);
zoomCtx.drawImage(main, e.x, e.y, 200, 200, 0, 0, 300, 300);
zoom.style.top = e.pageY - 10 + "px"
zoom.style.left = e.pageX - 10 + "px"
e.pageY = -150
e.pageX = -150
zoom.style.display = "block";
});
main.addEventListener("mouseleave", function() {
var zoom = document.getElementById("tCanvas");
zoom.style.display = "none";
});
drawing.src = base64;
};<canvas id="tCanvas" class="cgm" height="100" width="100" style="background-color:white; position: absolute; display: none; z-
index:1;border:1px solid red;"> </canvas>
<canvas tabindex=1 class="cgm" id="canvas1" style="position:relative; background:white;
left:0;right:0;margin:auto;z-index:1;margin-top:70px; "></canvas>
<p></p>
<button id="zoom" onclick="magnify();">Zoom</button>Here's a fiddle for reference (I fixed the height to display the scroll issue).
I'm going to focus on the part:
make a canvas image snapshot and draw it onto a smaller canvas
at a larger scale where the cursor coordinates are
Your code was doing a lot of stuff with the styles and I have no clue why, your comments do not give me any indication why that was needed, so I removed all that to keep this example as simple as possible
We need to draw so we will use that drawing = new Image() that you have and we need some integration with click I added a new variable drawing = new Image() clicking on the canvas will pause the zoom movement, and clicking again will resume it, that to me was the intuitive way
See my sample code below
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
var zoom = document.getElementById("zoom");
var zoomCtx = zoom.getContext('2d');
const z = zoom.width * 5
var pause = false
ctx.fillStyle = "blue";
ctx.fillRect(5, 5, 5, 90);
ctx.fillRect(60, 15, 20, 50);
for (let i = 10; i < 19; i++)
ctx.fillText(i, i * 2, i * 9 - 70);
var drawing = new Image();
drawing.src = canvas.toDataURL('image/png', 0);
canvas.addEventListener("mousemove", (e) => {
if (pause) return
zoomCtx.clearRect(0, 0, zoom.width, zoom.height);
zoomCtx.drawImage(drawing, e.x - 15, e.y - 15, 50, 50, 0, 0, z, z);
});
canvas.addEventListener("mousedown", (e) => {
pause = !pause
});canvas {
border: solid
}<canvas id="canvas" height="100" width="100"></canvas>
<canvas id="zoom" height="100" width="100"></canvas>