Fabric.js: How to set custom size for text or IText?

Question

I use excellent Fabric.js to draw some text in the canvas. When I specify an arbitrary size (say, a 200x200 rectangle) for my IText object, it seems that Farbric.js makes the width and height of the object fit around the text.

var t = new fabric.IText("Hello world !", {
  top: 100,
  left: 100,
  width: 200,
  height:200,
  backgroundColor: '#FFFFFF',
  fill: '#000000',
  fontSize: 12,
  lockScalingX: true,
  lockScalingY: true,
  hasRotatingPoint: false,
  transparentCorners: false,
  cornerSize: 7
});

Here is the scenario with my problem: http://jsfiddle.net/K52jG/4/

In this example, I want "Hello World!" the text should be in a box 200x200. Can this be done and how?

Answer 1

OK, therefore, since this is not possible, the best way I've found is to embed the IText field in a Rectangle object using a group

var r = new fabric.Rect({
    width: 200, 
    height: 200, 
    fill: '#FFFFFF',
  });


// create a rectangle object
var t = new fabric.IText("Hello world !", {
  backgroundColor: '#FFFFFF',
  fill: '#000000',
  fontSize: 12,
  top : 3,


});


var group = new fabric.Group([ r, t ], {
  left: 100,
  top: 100,
  lockScalingX: true,
  lockScalingY: true,
  hasRotatingPoint: false,
  transparentCorners: false,
  cornerSize: 7


});

: http://jsfiddle.net/4HE3U/1/

. "" , . : fontSize/4