6

There are a lot of answers, here on Stack Overflow, on how to get the coordinates of an event on a Canvas Element, relative to the Canvas itself. I'm using the following solution (getEventPosition) and it works well, except from when I add a border to my Canvas:

/**** This solution gives me an offset equal to the border size
 **** when the canvas has a border. Example:
 **** <canvas style='border: 10px solid black; background: #333;' id='gauge_canvas' width='500' height='500'></canvas>
 ****/

// Get DOM element position on page
this.getPosition = function(obj) {
    var x = 0, y = 0;
    if (obj.offsetParent) {
        do {
            x += obj.offsetLeft;
            y += obj.offsetTop;
            obj = obj.offsetParent;
        } while (obj);
    }
    return {'x': x, 'y': y};
};

// Get mouse event position in DOM element (don't know how to use scale yet).
this.getEventPosition = function(e, obj, aux_e, scale) {

    var evt, docX, docY, pos;

    evt = (e ? e : window.event);
    if (evt.pageX || evt.pageY) {
        docX = evt.pageX;
        docY = evt.pageY;
    } else if (evt.clientX || evt.clientY) {
        docX = evt.clientX + document.body.scrollLeft +
            document.documentElement.scrollLeft;
        docY = evt.clientY + document.body.scrollTop +
            document.documentElement.scrollTop;
    }
    // This works on hammer.js
    else if (typeof aux_e !== 'undefined') {
        docX = aux_e.touches[0].x;
        docY = aux_e.touches[0].y;
    }
    pos = this.getPosition(obj);
    if (typeof scale === 'undefined') {
        scale = 1;
    }
    return {'x': (docX - pos.x) / scale, 'y': (docY - pos.y) / scale};
};

Since this code belongs to my library and can take whatever canvas element an user gives it, when an user gives the library a bordered canvas, things break up. Is there a solution taking borders in account?

2 Answers 2

3

Here's what I've been using for my latest experimentation.

http://jsfiddle.net/simonsarris/te8GQ/5/

var stylePaddingLeft = parseInt(document.defaultView.getComputedStyle(can, undefined)['paddingLeft'], 10) || 0;
var stylePaddingTop = parseInt(document.defaultView.getComputedStyle(can, undefined)['paddingTop'], 10) || 0;
var styleBorderLeft = parseInt(document.defaultView.getComputedStyle(can, undefined)['borderLeftWidth'], 10) || 0;
var styleBorderTop = parseInt(document.defaultView.getComputedStyle(can, undefined)['borderTopWidth'], 10) || 0;
var html = document.body.parentNode;
var htmlTop = html.offsetTop;
var htmlLeft = html.offsetLeft;

function getMouse(e) {
    var element = can,
        offsetX = 0,
        offsetY = 0,
        mx, my;

    // Compute the total offset
    if (element.offsetParent !== undefined) {
        do {
            offsetX += element.offsetLeft;
            offsetY += element.offsetTop;
        } while ((element = element.offsetParent));
    }

    // Add padding and border style widths to offset
    // Also add the <html> offsets in case there's a position:fixed bar
    offsetX += stylePaddingLeft + styleBorderLeft + htmlLeft;
    offsetY += stylePaddingTop + styleBorderTop + htmlTop;

    mx = e.pageX - offsetX;
    my = e.pageY - offsetY;

    // We return a simple javascript object (a hash) with x and y defined
    return {
        x: mx,
        y: my
    };
}

It works with any border and padding and also works on pages that shim in an object that offsets the HTML (like the stumbleupon bar). It also works if the browser is zoomed.

It seems to work fine on touch devices too.

0

Try this:

this.getPosition = function(obj) {
    var x = 0, y = 0;
    if (obj.offsetParent) {
        do {
            x += obj.clientLeft;
            y += obj.clientTop;
            obj = obj.offsetParent;
        } while (obj);
    }
    return {'x': x, 'y': y};
};

clientLeft and clientTop include borders, but offsetLeft and offsetTop don't.

If you don't want to include other elements, maybe the following will work:

this.getPosition = function(obj) {
    return{'x': obj.clientLeft,
           'y': obj.clientTop};
};
2
  • 1
    This not only doesn't solve the problem, but it adds the height of the two h1 elements on top of the canvas to the y coordinate it returns :( Sep 9, 2012 at 20:06
  • @janesconference I have edited my answer, try it. And maybe you could provide a jsfiddle with all your code in order to test it.
    – Oriol
    Sep 9, 2012 at 20:33

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.