title: Values of Fabric.js canvas coordinates change when canvas is repositioned
body: <p>Consider the following code in the body tag:</p>
  
  <pre><code>&lt;div id='div1'&gt;&lt;/div&gt;
  &lt;canvas id='c1' width='1000px', height='400px'&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Now, under the script tag,</p>
  
  <pre><code>var canvas = new fabric.Canvas('c1');
  
  canvas.on('mouse:down', getMouse);
  function getMouse(ev)
  {
  var pointer = canvas.getPointer(ev.e);
  var origX = pointer.x;
  var origY = pointer.y;
  console.log(origX+', '+origY);
  }
  </code></pre>
  
  <p>Under the style tag,</p>
  
  <pre><code>#div1
  {
  float: right;
  position: relative;
  border-style: solid;
  border-width: 1px;
  height: 200px;
  width: 200px;
  display: inline;
  }
  </code></pre>
  
  <p>The console logs negative values of y every time I click above the lower line of the bounding box of the div element. Why? What is the fix?</p>
  
  <p>Also, I would like to ideally have the canvas in the center of the page flanked by two  elements on both sides I followed the CSS given here: <a href="http://alistapart.com/article/holygrail" rel="nofollow">http://alistapart.com/article/holygrail</a> </p>
  
  <p>What happens is that the div elements are both hidden by the canvas wrapper. How do I fix this?</p>