In google chrome, getBoundingClientRect().x is und

Question

I'm performing drawing operations on canvas. The best way to calculate cursor position relative to canvase top left corner is, in my opinion, usage of .getBoundingClientRect():

HTMLCanvasElement.prototype.relativeCoords = function(event) {
  var x,y;
  //This is the current screen rectangle of canvas
  var rect = this.getBoundingClientRect();

  //Recalculate mouse offsets to relative offsets
  x = event.clientX - rect.x;
  y = event.clientY - rect.y;
  //Debug
  console.log("x(",x,") = event.clientX(",event.clientX,") - rect.x(",rect.x,")");
  //Return as array
  return [x,y];
}

I see nothing wrong with this code and it works in firefox. Test it.

In google chrome however, my debug line prints this:

x(NaN) = event.clientX(166) - rect.x(undefined)

What am I doing wrong? Is this not according to the specifications?

Edit: seems my code follows W3C:

From the specs:

getBoundingClientRect()

The getBoundingClientRect() method, when invoked, must return the result of the following algorithm:

1. Let list be the result of invoking getClientRects() on the same element this method was invoked on.

2. If the list is empty return a DOMRect object whose x, y, width and height members are zero.

3. Otherwise, return a DOMRect object describing the smallest rectangle that includes the first rectangle in list and all of the remaining rectangles of which the height or width is not zero.

DOMRect

interface DOMRect : DOMRectReadOnly {
    inherit attribute unrestricted double x;
    inherit attribute unrestricted double y;
    inherit attribute unrestricted double width;
    inherit attribute unrestricted double height;
};

Answer 1

You define like this.

var rect.x = this.getBoundingClientRect().width;

var rect.y = this.getBoundingClientRect().height;

Answer 2

The object returned by getBoundingClientRect() may have x and y properties in some browsers, but not all. It always has left, top, right, and bottom properties.

I recommend using the MDN docs instead of any W3C specs when you want to know what browsers actually implement. See the MDN docs for getBoundingClientRect() for more accurate information on this function.

So all you need to do is change your rect.x and rect.y to rect.left and rect.top.