Fabric.js changes my canvas size to 300x150 after initialization

javascript canvas fabricjs
user469652 picture user469652 · May 14, 2012 · Viewed 41.2k times · Source

HTML:

  <div class="canvas-wrapper">
    <canvas id="myCanvas"></canvas>
  </div>

CSS

.canvas-wrapper {
    width: 900px;
    min-height: 600px;
 }

 #myCanvas{
     border:1px solid red;
     position: absolute;
     top:22px;
     left:0px;
     height: 100%;
     width: 99%;
 }

JS

var myCanvas = new fabric.Canvas('myCanvas');

My canvas get resized to 300x150 after it's been initialized, why?

Answer

Smit picture Smit · Jan 9, 2013

in the latest version, you will have to do something like:

var canvas = new fabric.Canvas('myCanvas');
canvas.setHeight(500);
canvas.setWidth(800);

.... Your code ....

canvas.renderAll();

Works fine for me..

For dynamically changing size, this works too

Related questions

How to select Fabric.js object programmatically

I want to programmatically select Fabrics.js object. What do I have to do? For example, I am adding two objects like this: var canvas = new fabric.Canvas('canvas'); canvas.add(new fabric.Rect({ left: 100, top: 100, width: 75, height: 50, fill: 'green', …

Read More
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
Fabric.js: how to deselect one or multiple objects on canvas?

For example, I have multiple objects on a canvas, A,*B* and C. Three of these objects are selected as activated. By using Fabric.js, is it possible to discard/deactivate only one of the objects? For example, Three objects …

Read More