1

I have a canvas inside a div which makes it scrollable to the right/left if its to large. I need to get the click coordinates on the canvas. I have tried so many different things I have seen but nothing is giving me the right coordinates. I have a rectangle in the canvas and when i click on the rectangle which is at a set coordinate.The "clicked" coordinates are not what they should be the x coordinate is 100px short. Could anyone point me in the right direction ?

HTML:

<div id="cv">
<canvas id="canvas" width="30000" height="600"></canvas>
</div>

CSS:

<style>
#cv{
   display: block;
   width: 1500px;
   height: 500px;
   overflow: auto;
}


<script>
canvas.addEventListener("mousedown", doMouseDown, false);
function doMouseDown(event){
var totalOffsetX = 0;
var totalOffsetY = 0;
var canvasX = 0;
var canvasY = 0;
var currentElement = this;
do{
    totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
    totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
}
while(currentElement = currentElement.offsetParent)
canvasX = event.pageX - totalOffsetX;
canvasY = event.pageY - totalOffsetY;
}
</script>
workingxx
  • 226
  • 4
  • 16
  • See if this is able to help you: http://stackoverflow.com/questions/29501447/why-does-css-centering-mess-up-canvas-mouse-coordinates/29501632#29501632 –  Apr 09 '15 at 13:44
  • A width of 30000 seems a little bit over the edge btw. –  Apr 09 '15 at 13:46
  • It does doesnt it lol. But its necessary, the canvas is for a clickable graph using data form Whitepages Pro API, and there has been times where that is not enough – workingxx Apr 09 '15 at 14:01
  • 1
    :) You could instead use a smaller canvas combined with translate, and just redraw the visible portion. This will have a much better memory performance, redraw performance; and some browsers can only show up to 8-10k in width.. just a tip. –  Apr 09 '15 at 14:03
  • Thanks about the width max I did not know that. I wanted to use redraw but the API calls are limited and it seemed as I would have had to make the call->draw graph to start, and if i needed to redraw i would have to make another API call tore get the data which I cant be using 2 API calls per one time. – workingxx Apr 09 '15 at 14:09
  • Ugh I can not find any help on this! My JS function returns the coordinates of the click but only to what part of the canvas you see on the screen. If you scroll over 500px with the scroll bar, and click the top left corner it still says the coordinate is 1,1 because thats what you can currently see and not the whole canvas – workingxx Apr 09 '15 at 17:40
  • 2
    Sorry you still haven't gotten it sorted, but take a closer look at the link that @KenFyrstenberg gave--it correctly returns the mouse X & Y even when the window is scrolled and the canvas is partially off-screen. – markE Apr 10 '15 at 03:46

1 Answers1

0

I just used a mouse following function, and if there was a click it takes the coordinates of that. It isnt how I wanted it to go but it seems to be working fine.

workingxx
  • 226
  • 4
  • 16