Setting Text Background Color with Gradient Fabric Js

Question

I am trying to set a background Color to an IText Object from Fabric.js and have encoutered two problems:

Is it possible to set a linear Gradient to the Backgroundcolor of text somehow?
Is it possible to have some padding withing the background colored Part of the text

Thanks for the answers!

abdulmoeez · Accepted Answer · 2020-08-24 14:13:27Z

1

I am pretty sure what you are asking is not possible, It is no where mentioned on their documentation, Here's an alternative to your problem Instead of adding a background to text, you can create a rectangle object and add fill it with gradient, you can refer to fabric js documentation for more on gradients http://fabricjs.com/fabric-intro-part-2#gradients You can then add the text over the rectangle object, I have added a example The padding inside will then just be the width and height of the rectangle which you can easily adjust.

fabric.Object.prototype.set({
    transparentCorners: false,
    cornerColor: 'rgba(102,153,255,0.5)',
    cornerSize: 12,
    padding: 5
});

// initialize fabric canvas and assign to global windows object for debug
var canvas = window._canvas = new fabric.Canvas('c1');


var text = new fabric.IText("Bharat\nasdsa\nasdasda\nnn\nklssd", {
    fontFamily: 'Courier New',
    left: 20,
    top: 20,
    fontSize: 26,
    fill: '#fff'
});

var rect = new fabric.Rect({
    width: 200,
    height: 200,
    fill: '#ffcc12',
    opacity: 1
});

rect.setGradient('fill', {
  x1: 0,
  y1: 0,
  x2: rect.width,
  y2: 0,
  colorStops: {
    0: "red",
    0.2: "orange",
    0.4: "yellow",
    0.6: "green",
    0.8: "blue",
    1: "purple"
  }
});

var group = new fabric.Group([rect, text]);
canvas.add(group);
canvas.centerObject(group);

canvas {
    border: 1px solid #999;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.6/fabric.min.js"></script>
<canvas id="c1" width="300" height="300"></canvas>

answered Aug 24, 2020 at 14:13

abdulmoeez

175 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

rsaw Over a year ago

Hi, thanks for your answer! Yes this works, only problem is that I wanted to be able to still edit the text if i select it, but now on select I am selecting a Group of Elements and am not able to select and edit the textfield

abdulmoeez Over a year ago

For that you would need to do some manipulation, when you select a group, you get all the group elements, you can write code to get the text element in the selected group and edit it.

rsaw · Accepted Answer · 2020-10-17 10:01:05Z

0

The solution that worked for me and allows to edit the text is the following

Group Rectangle with background as in abdulmoeez answer
Then watch if this group is selected, if it is selected un-group it and set selected element to the text, so that it is editable.
If user has finished editing the text, re-render it with fitting border and regroup

answered Oct 17, 2020 at 10:01

rsaw

1441 silver badge14 bronze badges

Collectives™ on Stack Overflow

Setting Text Background Color with Gradient Fabric Js

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related