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:

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

Thanks for the answers!

Answer 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>

Answer 2

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

1. Group Rectangle with background as in abdulmoeez answer
2. 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.
3. If user has finished editing the text, re-render it with fitting border and regroup