jqueryhtmlcanvasfabricjsspacing

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

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

enter image description here

Any help would be appreciated.

Solution

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