CanvasTexture clear causing Maximum call stack size exceeded

Phaser 3
1

Is this a bug?
I managed to create an extended CanvasTexture class and when I call this.clear() in the update loop,
the game crashes, creating Maximum call stack size exceeded.

Removing this.clear(), everything works but the canvas isn’t cleared.

Currently the only that works for me if I create create the canvastexture through

scene.textures.createCanvas()

Extending the CanvasTexture class and running an update with clear() breaks it.
Just for your information, when I create the object, I pass the source as

const myCanvas = document.createElement('canvas');
myCanvas.setAttribute('width', gameWidth);
myCanvas.setAttribute('height', gameHeight);

I also tried

Phaser.Display.Canvas.CanvasPool.create(scene.textures, gameWidth, gameHeight, Phaser.CANVAS, true);

Both source I tried ended with the same clear() bugs when calling this within the extended CanvasTexture.

At least I have a solution by using scene.textures.createCanvas(); would be better if extended CanvasTexture works.

2

Show this part?

3

I tested with the update loop to literally have this.clear() and just a console log. And it breaks and this is called within the extended CanvasTexture class.

Removing this.clear() stops the game from breaking and update loop works fine based on the logs I have.

This update is being called from an extended Scene class where it is being created because the extended CanvasTexture class update function were never being called.

4

You may have scenes and textures mixed up somehow, but I can’t tell without seeing the code. Textures don’t have an update loop.

You should be able to see in the error trace where the calls are repeating. Probably you’re stuck between the texture’s clear() and update().

5

Here is a code snippet;

In the scene, I create the source and the extended CanvasTexture.

const theSource = Phaser.Display.Canvas.CanvasPool.create(this.textures, width, height, Phaser.CANVAS, true);
// In addition, I also tried to create source this way, to see if it makes any difference but it doesn't
/*const theSource = document.createElement('canvas');
theSource.setAttribute('width', '828');
theSource.setAttribute('height', '1792');*/
this.theCanvasTexture = new MyCanvasTexture(this.textures, 'texture_sample', theSource, width, height);

// Create a sprite based on this new texture
this.mySprite = new Phaser.GameObjects.Sprite(this, myPosX, myPosY, 'texture_sample');
this.add.existing(this.mySprite);

In the scene update loop,

this.theCanvasTexture.update(time, delta);

In MyCanvasTexture class constructor

constructor(manager, key, source, width, height) {
    super(manager, key, source, width, height);
   
    // Add this to the list, the same way addCanvas() function does
    manager.list[key] = this;
    manager.emit(Phaser.Textures.Events.ADD, key, this);
}

I did more testing by drawing a rectangle, in my update loop of MyCanvasTexture class

update(time, delta) {
    console.log(delta);
    this.clear();
    this.context.fillRect(targetX, targetY, 200, 200);
    this.refresh()
}

By calling this.clear(); it will break the game; but, if I comment out this.clear(); it works fine. I will see the rectangle being drawn at the target position; but, the previous drawn rectangle won’t be cleared since this.clear(); is commented out.

In addition regarding the error, right after this.clear(); is being called, my delta logged value becomes null. Both time and delta become null right after the first call of this.clear();

Then, after a few loops, everything stops with maximum stack calls.

Something with this.clear() call within extended CanvasTexture class breaks things. Not sure if it breaks the update loop? Since both delta and time returns null right after the first
this.clear(); being called.

I wonder if this is a bug?

6

Don’t override CanvasTexture#update(). That’s not what it’s for.

7

Oh wow thanks!!!

Now the mystery is solved. I just make a new update / customUpdate and that works now.

I guess the update for CanvasTexture is not the ordinary update.

Thanks!