How to reduce selection area padding in text object in fabric js

Question

Here, we have working in fabric.js with creating design tool.We need to reduce padding for selection area in text object in fabric js. Canvas object text is highlighted/selected and although it is as big as the original size, the selected box stretches over the working area.This is not as user friendly to handle this issue.How to reduce selection area padding size in canvas object. we have tried to added padding in "Canvas.set()" function but it is not response/change in working area.

objss.set({
 borderColor: 'green',
 cornerColor: 'purple',
 CornerSize: 33,
 transparentCorners: false,
 strokeWidth: 10,
padding:4
});

Any help would be appreciated.

Answer 1

I made a small jsfiddle, where in 2 simple text-objects the padding (and therefor the selected box) is set in 2 different sizes: http://jsfiddle.net/z4fty1de/ is this what you wanted to know? If not, can you create a small example on jsfiddle?

canvas.add(new fabric.Text('hello world1', { left: 100, top: 100, padding: 43 }));
canvas.add(new fabric.Text('hello world2', { left: 100, top: 250, padding: 0 }));

Answer 2

if your selected box not properly your set on text it's means that your text load before FONT. See fabrics js example to use font. http://fabricjs.com/loadfonts

if you still facing any problem then clear your font cache like this.

fabric.util.clearFabricFontCache(obj.fontFamily); // obj.fontFamily - is your font name

Full Example when you load from json

this.canvas.getObjects().forEach((obj)=> {
  if(typeof obj.type !== 'undefined' && obj.type=="i-text"){
    this.canvas.setActiveObject(obj);
    fabric.util.clearFabricFontCache(obj.fontFamily);
    this.canvas.getActiveObject().set("fontFamily", obj.fontFamily);
    this.canvas.renderAll();
  }
});