Sign in to follow this  

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

Share this post

Link to post
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 :
 But there is a horizontal spacing between letters and I didn't find any property to avoid that.

Share this post

Link to post
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;


Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.