Question

0

56

Vistas

HTML-5 Canvas Magnifying Glass unable to mouse down/drag and scrolling interferes with image

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.

When I scroll down, the canvas containing the zoomed canvas/image no longer shows what its over but instead the top of the canvas/image.
I am unable to set up a click event where the user can hold down the left mouse and move the zoom area until mouseup. I have tried mouse down and mouse up event listeners to no avail so for reference i have it on mousemove and mouseleave, which also doesnt work well but needs to be replaced with mouseup instead.

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).

JSFiddle

5 months ago · Juan Pablo Isaza

1 Respuestas

Responde la pregunta

0

Responde la pregunta

Encuentra empleos remotos

Answer 1 · 2022-06-29T03:41:14.048Z

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>