0

The problem is:

We have a big canvas (with scroll) inside a div, with a background image, and if we try to draw over it coordinates are not the same.

To show the problem we draw in the mousemove function, the position is ok at 0,0 coordinates but if we keep moving to the right or down in the image the difference the circle is draw and mouse is bigger and bigger.

If mouse is near top left corner difference where circle is paint is little but if we are near bottom right difference is several hundred of pixels.

The canvas inside a a div:

<canvas style="width: 1500px; height:800px;" id="myImage" width="1947" height="949"></canvas>

Style is to fix a size and get scroll, width and height is the image real size.

canvas = document.getElementById('myImage');
context = canvas.getContext('2d');
s.addEventListener('mousemove', function(evt) {
  var mousePos = getMousePos(canvas, evt);
  drawTest(mousePos.x, mousePos.y);
}, false);

function getMousePos(canvas, evt) {
  var rect = canvas.getBoundingClientRect();
  return {
    x: evt.clientX - rect.left,
    y: evt.clientY - rect.top
  };
}

function drawTest(centerX, centerY) {
  //var rect = canvas.getBoundingClientRect();
  //centerX = centerX  + rect.left;
  //centerY = centerY  + rect.top;
  var radius = 5;
  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
  context.lineWidth = 2;
  context.strokeStyle = '#003300';
  context.stroke();
}

We've tried with, and without, adding canvas.getBoundingClientRect coordinates with no result.

Question

How can we solve it and draw in the same exact coordinate the mouse is?

Mark Rotteveel
  • 100,966
  • 191
  • 140
  • 197
z80
  • 7
  • 3
  • 1
    Include in your question everything required for an [MCVE](https://stackoverflow.com/help/mcve). `getMousePos` looks critical to figuring out what the problem is. – AuxTaco Dec 27 '17 at 10:32
  • Remove the style attribute from the canvas, use its `width` and `height` attributes to resize the canvas. – Teemu Dec 27 '17 at 10:56
  • Cant remove the style attributes, for a responsive web etc... "designer requirements", but the problem was solved with the rescalation answer by Solver. – z80 Dec 27 '17 at 13:28

1 Answers1

0

Your problem is the scale of your canvas. The HTML5 canvas has 2 sizes - one is the size that it is shown on the page, and one is the size of the internal canvas.

style="width: 1500px; height:800px;" shows that on your screen, the canvas will be 1500px across and 800px wide.

However, width="1947" height="949" means that the coordinates of the canvas go up to 1947 on the x axis and 949 on the y axis. That means that the far left has an x coordinate of 1947. However, your getMousePos function shows the coordinate on the screen, making the far left look like it's at an x coordinate of 1500.

To fix this, you need to "rescale" the mouse coordinate. Replace this line:

context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);

with 

context.arc((centerX / 1500) * 1947, (centerY / 800)*949, radius, 0, 2 * Math.PI, false);

I've made a JS fiddle to show this: https://jsfiddle.net/wLwjz7p6/

Solver
  • 618
  • 7
  • 15