Jump to content

Text with border or bold


Recommended Posts


I am using BABYLON.GUI in my project and sometimes the text is not really readable when displayed with no background.

I want to add a text shadow or at least bold the text so that you can correctly read it. But I didn't find a way to do that with BABYLON.GUI.

Do you have an idea?

Thanks, Pichou

Link to comment
Share on other sites

Of course! So simple I regret I haven't thought to do that! Thanks @johnK
I gave me the idea to just rise the fontsize of the replicated text to have a border everywhere : https://www.babylonjs-playground.com/#XCPP9Y#408
 But there is a horizontal spacing between letters and I didn't find any property to avoid that.

Link to comment
Share on other sites

Hi @pichou 
Here's another method using context.strokeText, it does however require overwriting the _drawText function.


BABYLON.GUI.TextBlock.prototype._drawText = function (text, textWidth, y, context) {
        var width = this._currentMeasure.width;
        var x = 0;
        switch (this._textHorizontalAlignment) {
                x = 0;
                x = width - textWidth;
                x = (width - textWidth) / 2;
        if (this.shadowBlur || this.shadowOffsetX || this.shadowOffsetY) {
            context.shadowColor = this.shadowColor;
            context.shadowBlur = this.shadowBlur;
            context.shadowOffsetX = this.shadowOffsetX;
            context.shadowOffsetY = this.shadowOffsetY;
            context.strokeStyle = (this.outlineColor ? this.outlineColor : "black");
            context.lineWidth = (this.outlineWidth ? this.outlineWidth : 5);
            context.strokeText(text, this._currentMeasure.left + x, y);
        context.fillText(text, this._currentMeasure.left + x, y);

var text1 = new BABYLON.GUI.TextBlock();
    text1.text = "Hello world";
    text1.color = "white";
    text1.fontSize = 24;

    text1.drawOutline = true;
    text1.outlineColor = "black";
    text1.outlineWidth = 4;


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