Jump to content

Remove border from text2d


Recommended Posts


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:


I hope somebody knows some Canvas2D vodoo :)

Link to comment
Share on other sites

@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.

Link to comment
Share on other sites

@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. 


Link to comment
Share on other sites

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.


Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...