Fabric.js: Canvas with 100% width possible?

html canvas fabricjs
thomasf1 picture thomasf1 · Mar 5, 2013 · Viewed 18.1k times · Source

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

ilumin picture ilumin · Jul 2, 2014

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();
})();

Related questions

Let user delete a selected fabric js object

I have a simple fabric js based application where I will let users add shapes connect them and animate them. Following is my JS var canvas; window.newAnimation = function(){ canvas = new fabric.Canvas('canvas'); } window.addRect = function(){ var rect = new …

Read More
Delete multiple Objects at once on a fabric.js canvas in html5

I'm actually working on a html5 canvas project which uses the fabric.js Framework for the canvas interactions. Now I'm struggeling with the deletion of multiple objects. The following code does not seem to track the selected objects, but tracks …

Read More
How to identify the type of a selected object?

I am placing Text, Image and Shapes on canvas using Fabric.js. I have made Three different Edit-Panels for all three. When user select text I want to show text panel. like wise for image and shapes. How to identify …

Read More