Fabric Camvas width

by thomasf1

HTML

<div style=' text-align:center;'>
    <canvas id='c' style='border : solid red 1px;'>blah</canvas>
    <div style="position: relative;">hello world</div>
    <input type="button" value="Some button" id="inline-btn"
    style="position: absolute; left: 100px; top: 100px;">
</div>

SCSS

.canvas-container {
    margin:0 auto;
    position: absolute !important;
    width: 100% !important;
    border : solid blue 1px;
}
.lower-canvas,
.upper-canvas {
    //width: 100% !important;
    //height: 100% !important;
}

CoffeeScript

###
 when you instantiate the fabric.canvas, it re-positions the <canvas>
    because fabric creates new DOM stuff:
  <div id="wrapper">
    <div class="canvas-container">
      <canvas class="upper-canvas"        ></canvas>
      <canvas class="lower-canvas" id="c"></canvas
    </div>
  </div>
###
###
var canvas = new fabric.Canvas('c' );
var rect   = new fabric.Rect ( { top: 0, left: 0, width: 40 , height:30, fill: '#f55'  ,  opacity: 0.7});
	  canvas.add(rect);
//rect.center();
###
positionBtn = (obj) ->
  absCoords = canvas.getAbsoluteCoords(obj)
  btn.style.left = (absCoords.left - btnWidth / 2) + "px"
  btn.style.top = (absCoords.top - btnHeight / 2) + "px"
    
canvas = new fabric.Canvas("c")
#canvas.setWidth(700)

fabric.Canvas::getAbsoluteCoords = (object) ->
  left: object.left + @_offset.left
  top: object.top + @_offset.top

btn = document.getElementById("inline-btn")
btnWidth = 85
btnHeight = 18
fabric.Image.fromURL "http://fabricjs.com/lib/pug.jpg", (img) ->
  canvas.add img.set(
    left: 30
    top: 30
    angle: 30
  ).scale(0.25)
  img.on "moving", ->
    positionBtn img

  positionBtn img