Fabric.js: Canvas with 100% width possible?

Question

When using 'canvas = new fabric.Canvas('foo')', Fabric converts the canvas element that has a css class with width=100% attached to it into something like that:

<div class="canvas-container" style="position: relative" width="293px">
  <canvas class="upper-canvas"></canvas>
  <canvas class="lower-canvas" id="c"></canvas>
</div>

The wrapping div as well as both canvas elements are getting style tags and fixed width/height. In terms of initialization, I´ve only found canvas.setWdith which only takes numeric values though (no percent values).

Is there a way to initialize Fabric to respect/use the given 100% width?

Update: Example: http://jsfiddle.net/thomasf1/kb2Hp/

Answer 1

resize fabric's canvas by using its object and window innerWidth and innerHeight

(function(){   var canvas = new fabric.Canvas('app');    window.addEventListener('resize', resizeCanvas, false);    function resizeCanvas() {     canvas.setHeight(window.innerHeight);     canvas.setWidth(window.innerWidth);     canvas.renderAll();   }    // resize on init   resizeCanvas(); })(); 

Answer 2

I'm not sure if you can explicitly tell Fabric to use 100% width, but perhaps get the width of canvas-container through $('.canvas-container').width() or document.getElementById('canvas-container').clientWidth, and then using canvas.setWidth on that value? E.g.:

canvas.setWidth($('.canvas-container').width());

Protip: also remember to set this on window resize to prevent any overflow of content.