3

Getting the mouse coordinates on the canvas always works unless I have to scroll and then it goes wrong. y can end up being a negative number while it is on the canvas. Here is my code:

code block creating canvas:

var width = (document.getElementById('assessmentSectionForm' + platform).clientWidth);
        var height = Math.round(theSection.thePicture.ySize * (width / theSection.thePicture.xSize))
        var canvas = buildCanvas(Math.round(width), height, false, true);
        //var canvas = document.getElementById('assessmentImage');
        var ctx = canvas.getContext("2d");
        _context = ctx;
        _canvas = canvas;
        canvas.addEventListener("mousedown", relMouseCoords, false);

function getting coordinates:

function relMouseCoords(event) {
    var totalOffsetX = 0;
    var totalOffsetY = 0;
    var canvasX = 0;
    var canvasY = 0;
    var sect = _currentSection;
    var currentElement = this;

    do {
        totalOffsetX += currentElement.offsetLeft - currentElement.scrollLeft;
        totalOffsetY += currentElement.offsetTop - currentElement.scrollTop;
    } while (currentElement = currentElement.offsetParent)

    if (event.pageX || event.pageY) { 
        canvasX = event.pageX - totalOffsetX;
        canvasY = event.pageY - totalOffsetY;
    }

    //alert( 'x: ' + canvasX + '         y: ' + canvasY);
    for (var x = 0; x < _currentSection.allHotSpots.length; x++) {
        if (_currentSection.allHotSpots[x].myPicZoom === _currentPicZoomCode) {
            scaleTheHotSpot(_currentSection.allHotSpots[x], _currentSection.thePicture);
        }
    }

    for (var i = 0; i < _currentSection.allHotSpots.length; i++) {
        if (canvasX > _currentSection.allHotSpots[i].topLeft[0] &&
            canvasX < _currentSection.allHotSpots[i].bottomRight[0] &&
            canvasY > _currentSection.allHotSpots[i].topLeft[1] &&
            canvasY < _currentSection.allHotSpots[i].bottomRight[1] &&
            _currentSection.allHotSpots[i].myPicZoom === _currentPicZoomCode) {...

The rest of relMouseCoords is irrelevant because the mouse coords should be correct before I get to where I cut it off. Why does this code not account for scrolling? It looks like it should. I got it from This stack overflow answer. It is worth mentioning I am building a Telerik Mobile app, however I find the javascript to most of the time work the same as it would in a web page. If there is no obvious reason for the fault in this code, I may be best asking on the Telerik Forum.

Community
  • 1
  • 1
btf
  • 173
  • 2
  • 11

1 Answers1

3

Instead of event.pageX you could use event.layerX which returns the coordinate value of the element on which the event happened. That way you won't have to worry about offsets and anything else that might be going on with the window.

Note that both pageX/Y and layerX/Y are not suggested for production since at this moment nobody know what will happen to them.

https://developer.mozilla.org/en-US/docs/Web/API/UIEvent.layerX

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
canvas.addEventListener('mousedown', function(e) {
  alert("X: " + e.layerX + ' Y: ' + e.layerY);
  })
canvas {
  border: 1px solid;
  }
Shomz
  • 37,421
  • 4
  • 57
  • 85
  • Thanks, I just added to my question that it is a Telerik mobile app that I'm making. I think this may be the reason it is behaving differently. I tried your code and it still gets the y axis wrong upon scrolling. – btf Jan 27 '15 at 21:14
  • You're welcome. Hmmm, you removed all the offset calculations and tried just the layer properties, right? I know nothing about Telerik, but I've used this approach with scrolling pages on a few mobile apps. – Shomz Jan 27 '15 at 21:32
  • Yes, changed the `canvas.addEventListener` eventListener to your above code. Must be something to do with how Telerik scrolls. – btf Jan 27 '15 at 21:40
  • That's so weird. Please let us know if you discover something wrong in their code. – Shomz Jan 27 '15 at 21:44