CODEWITHSUNDEEP
javascriptcanvasfabricjs
Arun D
Arun D

Reputation: 2387

FabricJs canvas object with padding disappears on resize

I am using the following code to add an image as object inside the canvas:

fabric.Image.fromURL('item.png', function(oImg) {
    oImg.setWidth(130);
    oImg.setHeight(65);
    oImg.padding = 10;
    canvas.add(oImg);
});

I am giving a padding of 10 for the object. While resizing, the object disappears after the width/height goes approximately below 10. Then by getting that object using the code below, the dimensions are returned as NaN.

var obj = canvas.getObjects[0];

console.log(obj.height, obj.width, obj.left, obj.top);

// OUTPUT: NaN NaN NaN NaN

Can anyone help me out to find what's causing this issue?

Upvotes: 1

Views: 1019

Answers (1)

Durga
Durga

Reputation: 15604

This has been fixed in 2.0 . 

(function() {
  var canvas = this.__canvas = new fabric.Canvas('c');
  fabric.Image.fromURL('http://fabricjs.com/assets/pug_small.jpg', function(oImg) {
    oImg.set({
    left:20,top:20,padding:10,scaleX:0.8,scaleY:0.8,
    })
    canvas.add(oImg);
  });
})();
canvas{
  border-width: 1pz;
  border-style: solid;
  border-color: #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.0.0-rc.3/fabric.js"></script>
<div id="canvases">
<canvas id="c" width="600" height="600"></canvas>
</div>

and works up to version-1.7.18

Upvotes: 1

Related Questions