title: How to put an html element over a fabric.js element
body: <p>I want to put a button over a fabric.js element which is inside of a fabric.Group.</p>
  
  <p>How do I get the top-left corner coords relative to the canvas container of a fabric element and then set it to the button?.</p>
  
  <p>jsfiddle: <a href="https://jsfiddle.net/d9sp16yc/2/" rel="nofollow noreferrer">https://jsfiddle.net/d9sp16yc/2/</a></p>
  
  <p>I've tried things like <a href="https://stackoverflow.com/questions/27870315/how-to-add-a-text-box-popup-jquery-tooltip-or-similar-to-a-fabric-js-image-wit">this</a> or <a href="https://stackoverflow.com/questions/29829475/how-to-get-the-canvas-relative-position-of-an-object-that-is-in-a-group">this</a> but I don't get the results that I want. The button gets slightly moved to right or left / bottom or top.</p>
  
  <p>Another thing is that the <code>setSize</code> function is scaling the group when the window gets resized (just to get a responsive behaviour):</p>
  
  <pre><code>function setSize() {
    var width = $('.container').width();
    var height = width * 0.6;
    canvas.setWidth(width);
    canvas.setHeight(height);
    group.scaleToWidth(width);
    canvas.centerObjectH(group);
    // setPos($('#btn'), rect);
  }
  </code></pre>
  
  <p>And the problem is that this affects the way the coords are being calculated.</p>
  
  <p>Is this possible to put it in the top-left corner of the fabric object even when the window gets resized?</p>
  
  <p>I really need a quick solution for this so I would appreciate any suggestion/help to achieve this.</p>
  
  <p>Thanks in advance.</p>