В google chrome getBoundingClientRect().x не определен

Я выполняю операции рисования на холсте. На мой взгляд, лучший способ вычислить положение курсора относительно верхнего левого угла холста — это использовать .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];
}

Я не вижу ничего плохого в этом коде, и он работает в Firefox. Протестируйте.

Однако в google chrome моя строка отладки печатает это:

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

Что я делаю не так? Разве это не соответствует спецификациям?

Редактировать: кажется, что мой код следует W3C:

Из спецификаций:

getBoundingClientRect()

Метод getBoundingClientRect() при вызове должен возвращать результат следующего алгоритма:

1. Пусть list будет результатом вызова getClientRects() для того же элемента, для которого был вызван этот метод.

2. Если список пуст, верните объект DOMRect, члены которого x, y, width и height равны нулю.

3. В противном случае вернуть объект DOMRect, описывающий наименьший прямоугольник, включающий первый прямоугольник в списке и все остальные прямоугольники, высота или ширина которых не равны нулю.

DOMRect

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