Estoy haciendo una lupa para una aplicación de lienzo, pero me encontré con un problema con el desplazamiento. Esencialmente, el objetivo es tomar un lienzo y cuando se agrega una imagen (en este caso, una imagen cgm) y hacer una instantánea de ella, ampliarla y dibujarla en un segundo lienzo más pequeño que lo superponga y siga el mouse (preferiblemente un arrastre/mouse hacia abajo y hacia arriba, pero estoy usando mousemove para fines de prueba). Creo que el problema está en zoom.style.top & zoom.style.left NOTA en mi aplicación principal, tengo un margen superior de 70px, así que tenlo en cuenta.
aquí hay un ejemplo rápido que escribí
<!-- language: lang-js --> 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, ex, ey, 200, 200, 0, 0, 300, 300); zoom.style.top = e.pageY - 70 + "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>Aquí hay un violín como referencia (arreglé la altura para mostrar el problema del desplazamiento).
Simplifiqué gran parte del código en tu JSFiddle.
Vea si este es el comportamiento que está buscando:
const canvas = document.getElementById("canvas1"); const ctx = canvas.getContext("2d"); const zoom = document.getElementById("tCanvas"); const zoomCtx = zoom.getContext('2d'); for (let i = 10; i < 20; i++) for (let j = -60; j < 800; j += 60) ctx.fillText(j + i, i * 20 - 180, i * 9 + j); function getMousePos(evt) { var rect = canvas.getBoundingClientRect() return { x: evt.clientX - rect.left, y: evt.clientY - rect.top } } canvas.addEventListener("mousemove", function(e) { zoomCtx.clearRect(0, 0, zoom.width, zoom.height); let pos = getMousePos(e) zoomCtx.drawImage(canvas, pos.x, pos.y, 200, 200, 0, 0, 300, 300); zoom.style.top = e.pageY - 10 + "px" zoom.style.left = e.pageX - 10 + "px" zoom.style.display = "block"; }); canvas.addEventListener("mouseleave", function() { zoom.style.display = "none"; }); #tCanvas { border: 1px solid red; display: none; position: absolute; background-color: #808080; pointer-events: none; } #canvas1 { background-color: #808080; } <canvas id="tCanvas" width=100 height=100></canvas> <canvas id="canvas1" width=240 height=800></canvas> Creo que su problema fue con pointer-events: none; el lienzo superior impedía que los eventos llegaran al lienzo inferior.
Además, no tiene que declarar su document.getElementById(".. en cada función, esas deberían ser constantes globales
Para el problema con un lienzo largo, necesitamos usar canvas.getBoundingClientRect en el cálculo para obtener la posición real del mouse en el lienzo.