Adding padding and border radius in background text in Fabricjs

user_2169274 0
Viewed 4266

Is there any chance to add padding and border radius on Fabric JS background text i want to look like call to action button

enter image description here

JS

canvas = new fabric.Canvas('mainCanvas',
    backgroundColor: 'green'
)


text = new fabric.IText('hello world', 
    left: 200
    top: 100
    backgroundColor: "pink",
)
canvas.add(text)

HTML

<canvas id="mainCanvas" style="border:1px solid #aaa" width="600" height="300"></canvas>

JSFIDDLE

coffeescript fabricjs javascript
2 Answers

If anyone is looking for a solution with Textbox,

Here's another solution you can try: https://github.com/fabricjs/fabric.js/issues/3731

var TextboxWithPadding = fabric.util.createClass(fabric.Textbox, {
  _renderBackground: function(ctx) {
    if (!this.backgroundColor) {
      return;
    }
    var dim = this._getNonTransformedDimensions();
    ctx.fillStyle = this.backgroundColor;

    ctx.fillRect(
      -dim.x / 2 - this.padding,
      -dim.y / 2 - this.padding,
      dim.x + this.padding * 2,
      dim.y + this.padding * 2
    );
    // if there is background color no other shadows
    // should be casted
    this._removeShadow(ctx);
  }
});

Extend the base class and overwrite the _renderBackground function.

Very simple and works well for me!

user_8516870
Related