Cannot add stroke to TextField in HTML5

Help
#1

How I can add stroke-effect to text field in html5? Also I notice, that filters doesn’t work in html5. Maybe exists some solution?

#2

Hi, I don’t know it it is going to help, but I port this script to haxe and it add a stroke on any IBitmapDrawable.
But it returns a Bitmap. Im my case it was helpfull.

I made an example using the AddingText OpenFL sample: https://www.dropbox.com/s/w79z0jiv7e6fawp/AddingText.zip?dl=0

You can see the original AS3 script here: https://lassieadventurestudio.wordpress.com/2008/10/07/image-outline/

I’m really an openfl beginner. Sorry if it was not helpfull.

1 Like
#3

This is interesting! Thanks for posting it @reinildo.

I’m wondering if the antialiased output could be improved…

#4

I think you could use AntiAliasType.ADVANCED:
textField.antiAliasType = AntiAliasType.ADVANCED;

and, make a larger textfield and scale the bitmap to a lower size:
bit.scaleX = bit.scaleY = .5;

also, I think you could try with some other fonts and see if they are more smoother.

#5

No I think that wouldn’t help much, but haven’t yet tried it!
Actually I was referring to the algorithm itself (the _antialias() function in the code you posted), which, by construction, tends to overwrite/reblend pixels from the top-right corner in blocks.

(Was thinking if it would be possible to make it use a running average to smooth the block output, or maybe run a first pass before the actual outline)