Remove border from text2d

[jschwuch]

Hi,

I'm trying to implement some white text for my project and am experiencing a problem with the text2d. The text always has a greyish border around it. How can i remove that border? It's alpha is identical to the alpha one gives to defaultFontColor but I couldn't find any way to disable it.

Here is a playground that shows some white text on white background, should be invisible but has a greyish border:

http://babylonjs-playground.com/#1BKDEO#205

I hope somebody knows some Canvas2D vodoo

[GameMonetize]

Ping @Nockawa

[Nockawa]

@jschwuch well, you're trying to display white text above a white background, so theoretically the result should be...only white, with invisible text.

Now as there's antialiasing to render the text you have some kind of greyish outline around the text.

But I'm sure you'll understand that white text above white background is not really something you want to do, if you pick any other kind of color for the text, the render will be fine, like this: http://babylonjs-playground.com/#1BKDEO#206

EDIT :  well I have to admit there's still a blending issue, the result shouldn't be like the one you have right now, it's something I should work on in the future, I've created a Trello Card to remember about this, honestly it won't be something I'll rush to fix because I think it's a minor issue. But I do take with high considering everything related to text rendering, so I won't forget about it.

[jschwuch]

@Nockawa of course I'm aware that I wouldn't want white text on white background. I just picked the example because one could clearly see the text even though the expected result would be to see nothing. Should have pointed that out. In my actual project the background isn't white but a light teal and I'm using a custom font which looks much more ragged than the arial in the playground. I'm now using the bold variant of our custom font because it looks much better. So now I got a result that is ok for me.

However, I just realized while playing with the playground example, that the greyish border is much darker and thicker when the canvas background is transparent (which is the case in my project) compared to the canvas having the teal background color.

Here are two playgrounds to show you what I mean:

canvas background teal: http://babylonjs-playground.com/#1BKDEO#208

canvas background transparent: http://babylonjs-playground.com/#1BKDEO#207

Let me guess, thats the anitaliasing beeing applied twice? Whatever the case, if there is no way to get rid of the border (currently?) I'm ok with it, I just wanted to know if I maybe missed some setting  You did a great job with the 2dcanvas api and I'm grateful for that. 

 

[Nockawa]

Yep you're right, as I said in the edit, there's a bad blending occurring and it shouldn't be the case, I'll definitely take a look at it.

Your PG version 208 also demonstrate an issue people encountered and could reproduce clearly which is a known as "edge bleeding"

I hope I can reproduce it locally, I'll also take a look to solve this one, here its Trello Card.

[Nockawa]

@jschwuch I'm working on it with the help of a team member, I'll keep you posted soon.

[Nockawa]

@jschwuch the text rendering issue is now solved, the preview file of Canvas2D are updated, the PG will be updated soon. I'll work on the bleeding edge later.

[jschwuch]

@Nockawa great! Thank you. I'll update to the latest alpha sometime later today and see how it looks

[Nockawa]

yep tell me because text rendering quality is top priority