Fabric.js: Text stroke outside of the text, rather than inside

[onassar]

Been playing with Fabric.js as well as jCanvas

I noticed that with jCanvas, a stroke can be applied outside of the text; eg:

Is there a way to accomplish this with Fabric.js?
Currently, the stroke is applied (what looks like) inside the text; eg:

Thanks for any help!

[asturur]

i think is a matter of inverting the order.
could you compare same font and same strokewidth?

it looks like that it is just first stroking and then filling, how does jcanvas behave with semi transparent filling?

[onassar]

The best I can so is show the code; it looks like you're right. It's an ordering this:

I've tried testing some changes, but no luck :(

[onassar]

Any movement here?

[onassar]

Any interest here? Would love to make use of this, and help out in testing if I can

[nemeth-it]

I think the feature to set the stroke inside or outside of the border should be focused in the near future. As you can see on the following image, other objects have the same problem.

First I thought what is this for a double-border-issue. But then slowly I recognized, the stroke is on the middle of inside/outside. So the stroke-feature get worse, if you want to use it with transparency together.

[asturur]

You can reverse stroke and fill order, but that won't change result in case of not full opaque filling.
Stroke in canvas works like that, is not something that fabricjs can fix.

Of course you can simulate an outer stroke scaling the canvas and reducing the stroke width to be just out of the circle, but this is not always doable in case of complex shapes.

[onassar]

Any chance to get some help on this in the near-future? Shout out to @asturur
I'm finding that text-stroke is more legible in jCanvas and a bit tough with fabric

[asturur]

can you attach some screenshot of the strokes fill better in jCanvas with semi transparent fill and semi transparent stroke? just to understand what they do

[onassar]

I don't have the codebase set up anymore @asturur

[asturur]

was it so much better? i mean with transparent fill could you see some stroke below? it looks like there are no demo running online.

[onassar]

Well it applied an inner + outer balanced stroke. i have a found way around this limitation for now though.

[asturur]

I developed this for a close source application, and even if i could, but i can't, i will never release for fabricjs as a core option. It cost in performance and has some drawbacks.
So i close this.

[danielwyb]

@onassar Hey! Struggling with the same.. inset stroke is just not a very good looking stroke. How did you get around this?

[onassar]

@danielwyb This is what I settled on.

/**
 * 
 * fabric.Textbox.prototype._renderText
 * 
 * Extended to reverse order of stroke and filling, to allow for more pleasing
 * stroke.
 * 
 * @see    http://stackoverflow.com/questions/26639132/canvas-fabricjs-separate-stroke-from-text-edge
 * @access private
 * @return void
 */
fabric.Text.prototype._renderText = function(ctx) {
  this._translateForTextAlign(ctx);
  this._renderTextFill(ctx);
  this._renderTextStroke(ctx);
  this._renderTextFill(ctx);
  this._translateForTextAlign(ctx, true);
};

[asturur]

can i ask why the double fill?

Anyway since there is an svg property that invert stroke and fill operations this can be a feature now. i discovered it recently.

i do not think this will fix your problems with style subranges. does it?

[onassar]

I can't recall why double-fill, but it works and I didn't have enough time to understand everything :(

[danielwyb]

Awesome, thanks @onassar @asturur ! Stroke gets a little weird with some fonts at bigger sizes, but looks a lot better than before at smaller sizes. I noticed that shadows don't work with single fill @asturur so maybe that's why.
_translateForTextAlign showed me an error so I removed it.

[asturur]

if you import the fonts in photoshop and you inspect theyr shape you will see they have spikes.

a way to se remove spikes is to set the corner style to round in fabricjs.

[danielwyb]

Thanks, strokeLineJoin: 'round' worked :)

[oktayacikalin]

I got into serious trouble by using a stroke value of 3 here: https://www.screenart.media/branchen/baeckerei-konditorei/plakat-liebe-verschenken/

On Chrome OS it would look ok, but on OSX and Windows the stroke was getting so dominant that nearly nothing of the text color was left.
The idea of https://github.com/kangax/fabric.js/issues/2378#issuecomment-278081810 fixed it.

PS strokeLineJoin: 'round' should IMO be a default for text elements..

[vehlad]

@onassar
please post the details where to put this code to achieve outline stroke . Thanks

[onassar]

It's posted here: https://github.com/kangax/fabric.js/issues/2378#issuecomment-278081810

[vehlad]

@onassar i mean replace previous lines of code or this code insert in any specific function ?

[onassar]

Copy and paste the code in your app after fabric is loaded. It simply
overwrites the native function / method.

On Fri, Mar 31, 2017 at 12:01 PM vehlad [e-mail] wrote:

@onassar https://github.com/onassar i mean replace previous lines of
code or this code insert in any specific function ?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/kangax/fabric.js/issues/2378#issuecomment-290658475,
or mute the thread
https://github.com/notifications/unsubscribe-auth/AAlaSh3FSdPN_qWuQbaToxYqJbNXDPLEks5rrMC7gaJpZM4Fi00r
.

>

—
Oliver Nassar

[DmitriyMakeev]

Hope it will helps, but little too late. You need to use paintFirst: "stroke" like

this.textLine = new fabric.Text(this.textValue, { strokeWidth: 2, paintFirst: "stroke", stroke: 'rgba(0, 0, 0, 1)', });

[asturur]

paintFirst wasn't available at the time of writing. Good to update the issue