Jump to content

[solved] GUI : TextBlock and text pixelated


Recommended Posts


I'm discovering GUI part, in Babylon JS.
And for now, I'm trying to create a textblock, with simple text.

But, my problem is that my text is pixelated, even I change fontFamily, fontSize.

I've also tried to use "renderAtIdealSize" and "idealWidth". But, nothing changes.

I've noticed that the pixelation is reduced when I change the zoom of the browser.
I specify that I use, in this case, Mozilla and also Chrome, for my tests.

Does it exist a solution ?

Here is a link towards a playground, in which I put a part of my code and specially
the part about the GUI.

The fact is, in the playground, the text is not pixelated.

I put also a screenshot of the result, in the browser Mozilla (Zoom is at 100%).

If anybody could give some advice, I thank you in advance.



Link to comment
Share on other sites


Thanks for your answer.
I confirm you that I already call engine.resize() :

          // Watch for browser/canvas resize events
            window.addEventListener("resize", function () {

And I use the basis for creating my canvas :
          #renderCanvas {
          width: 100%;
          height: 100%;
          touch-action: none;

But, I have still the same result.

Link to comment
Share on other sites

  • 3 weeks later...

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