How to add Text to a canvas in Phaser 3?

Phaser 3
1

Hi,
I want to add text to a canvas created with createCanvas(), I tried the following code but it’s not working, can someone please help. Thank you.

function create ()
{
    texture = this.textures.createCanvas('textcanvas', 800, 500);
    texture.context.fillStyle = "#ffffff";
    texture.context.fillText("Test Text", 0, 0);
    texture.refresh();
    this.add.image(400, 250, 'textcanvas');
}
2

I guess fillText or strokeText don’t work anymore because of webgl or something.

Even the debug function from Phaser2 is missing now. Which is too bad because I found using game.debug.text was super useful, I used it a lot for debugging and checking values, coords, internal enemy variables etc.

// phaser2 debug code, render
function: render() {
    for (var i = 0; i < enemy.length; i++) {
        game.debug.text( enemy[i].attack_state, enemy[i].x, enemy[i].y);
    }
}

So yeah I would also like to know if there is a way to draw text to canvas in Phaser 3. Ive tried using scene.add.text but then you also have to keep track and dispose of the texts which is not ideal for debugging.

3

So what is the best solution here? I guess I need to craft something custom - I am missing the game.debug as well.

4

The code is right but you also need

texture.context.textBaseline = "top";

Slightly complicated example in