Fabric.js: Text background color with padding

[wajipk]

Version

1.6.5

Test Case

http://jsfiddle.net/7T8WC/45/

Is it possible that background color fills whole text with padding?

[asturur]

no.
padding is for controls only.
Text background color is for the text line.
You can try backgroundColor instead.

[wajipk]

@asturur please check this jsfiddle I find same behaviour with backgroundColor too.
https://jsfiddle.net/wajipk/2yL3mvrx/

[asturur]

Behaviour is not the same, backgroundColor is larger than textBackgroundColor

Padding is not included in the object is just for selection.
If you want you can check on:
http://fabricjs.com/docs/fabric.Object.html
the property
selectionBackgroundColor
to see if it can help you.

[friday]

Adding this should work:

fabric.Text.prototype.set({
  _getNonTransformedDimensions() { // Object dimensions
    return new fabric.Point(this.width, this.height).scalarAdd(this.padding);
  },
  _calculateCurrentDimensions() { // Controls dimensions
    return fabric.util.transformPoint(this._getTransformedDimensions(), this.getViewportTransform(), true);
  }
});

Demo: https://codepen.io/fullkornslimpa/pen/XyOOKR/?editors=0010

[otseobande]

@friday your solution saved my day.

[ThakurKarthik]

@friday your solution works but it has a catch,Now the overall area increased for the text so even though corners seem to be in their right place , they respond when we click outside of the them with the added padding distance.

[mspanish]

@friday is there any way to adjust your code (which is fantastic, the perfect fix for auto text boxes!) - to allow for radius? Sure would be nice to have resizable rounded rects with such little fuss!

[friday]

I haven't touched that code or used Fabric in years. It's basically a copy of the original function, but using a different way to compute the size/padding. It might be possible to improve it to fix the issues both of you are having, but someone else would have to do that in this case.

[mspanish]

Thanks I figured it out with help from @asturur in this thread here #6309

[friday]

Nice @mspanish! I think you understand this code better than I ever did now :+1: