title: In google chrome, getBoundingClientRect().x is undefined
body: <p>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 <code>.getBoundingClientRect()</code>:</p>
  
  <pre><code>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];
  }
  </code></pre>
  
  <p>I see nothing wrong with this code and it works in firefox. <a href="http://jsfiddle.net/Darker/sj6tnfce/2/" rel="noreferrer">Test it.</a></p>
  
  <p>In google chrome however, my debug line prints this:</p>
  
  <blockquote>
    <p>x(<code>NaN</code>) = event.clientX(<code>166</code>) - rect.x(<code>undefined</code>) </p>
  </blockquote>
  
  <p>What am I doing wrong? <del>Is this not according to the specifications?</del></p>
  
  <p><strong>Edit:</strong> seems my code follows W3C:</p>
  
  <h2>From the specs:</h2>
  
  <h3><a href="http://www.w3.org/TR/cssom-view/#dom-element-getboundingclientrect" rel="noreferrer"><code>getBoundingClientRect()</code></a></h3>
  
  <blockquote>
    <p>The <code>getBoundingClientRect()</code> method, when invoked, must return the
    result of the following algorithm:</p>
    
    <ol>
    <li><p>Let list be the result of invoking <code>getClientRects()</code> on the same element this method was invoked on.</p></li>
    <li><p>If the list is empty return a <code>DOMRect</code> object whose <code>x</code>, <code>y</code>, <code>width</code> and <code>height</code> members are zero.</p></li>
    <li><p>Otherwise, return a <code>DOMRect</code> 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.</p></li>
    </ol>
  </blockquote>
  
  <h2><a href="http://dev.w3.org/fxtf/geometry/#DOMRect" rel="noreferrer"><code>DOMRect</code></a></h2>
  
  <pre><code>interface DOMRect : DOMRectReadOnly {
      inherit attribute unrestricted double x;
      inherit attribute unrestricted double y;
      inherit attribute unrestricted double width;
      inherit attribute unrestricted double height;
  };
  </code></pre>