Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add outline to the active text in Fabric.js

I have used canvas in the html5 using fabric js . I want to apply outlines to the active text on the canvas. following code I have written it is working fine but problem is when I increase the thickness of outline then it overlaps on the text that means text color disappears.

activeObject1.stroke = color;
activeObject1.strokeWidth = 5;

and one more thing by applying this I am unable to apply 2nd outline. I got one example but it is not working with the fabricjs.

http://jsfiddle.net/vNWn6/
like image 284
Rash Avatar asked Aug 16 '13 06:08

Rash


1 Answers

Fabric.js first applies a fill, followed by the stroke. You will need to invert the order in order to achieve the results.

 original
  _renderText: function(ctx) {
  this._renderTextFill(ctx);
  this._renderTextStroke(ctx);
  }

Before

  modified
   _renderText: function(ctx) {
  this._renderTextStroke(ctx);
  this._renderTextFill(ctx);
  }

After

version: fabric-1-7-1.js

like image 85
Rishabh Pradhan Avatar answered Sep 20 '22 08:09

Rishabh Pradhan