Phaser 3: Update() canvas texture not working

Question

I am trying to convert this post to phaser 3: https://phaser.io/tutorials/coding-tips-002 but the update() function not working.I have also tried with refresh() function but it not working too. In file a.ts I create a canvas texture:

this.textures1 = this.textures.createCanvas('canvastextures1', 450, 170)
this.land1 = this.textures.get(MAPOPTIONS.BASE1_NAME).getSourceImage()
this.textures1.draw(0, 0, this.land1)
this.textures1.context.globalCompositeOperation = 'destination-out'

and in file b.ts, in overlap() function:

  this.activeTextures = this.textures.get('canvastextures1')
  this.activeTextures.context.beginPath()
  this.activeTextures.context.arc(Math.floor(overlap2.x-tile.getTopLeft().x), Math.floor(overlap2.y-tile.getTopLeft().y), 50, 0, Math.PI * 2, false)
  this.activeTextures.context.fill()
  this.activeTextures.update()

Does anyone have any ideas? Thank you.

Answer 1

Here is a demo-code, that shows how I would approach the whole createCanvas, terrain/land destruction collision mechanic.
It should cover all the points, except the file splitting. I hope this helps.

Bomb & Crater Demo:

// Minor formating for stackoverflow
document.body.style = "display: flex;flex-direction: column;";    

class Scene extends Phaser.Scene {

        constructor() {
            super({ key: 'testScene' });
        }

        create() {

            // Start  -- GENERATE TEXTURE just for demo
            let helperGraphics = this.make.graphics({x: -250, y: -105, add: false});
            helperGraphics.fillStyle(0xEAEAEA, 1);
            helperGraphics.fillRect(0, 20, 500, 100 );
            helperGraphics.generateTexture('land', 500, 210);
            // End  -- GENERATE TEXTURE just for demo

            this.baseLand = this.textures.get('land').getSourceImage()
            this.baseCanvas = this.textures.createCanvas('currentLand', 800, 200);
            // Create initial Land Texture
            this.baseCanvas.draw(0, 0, this.baseLand);
            this.baseCanvas.context.globalCompositeOperation = 'destination-out';
            // load image to scene
            this.land = this.add.image(0, 20, 'currentLand').setOrigin(0);
            this.physics.add.existing(this.land);
            this.land.body.setImmovable(true);
            this.land.body.setAllowGravity(false);

            // init bomb
            this.createBomb();

        }
        // creates always new bomb
        createBomb(bomb, land) {
            this.bomb = this.add.circle(Phaser.Math.Between(100, 300), -5, 5, 0x6666ff);
            this.physics.add.existing(this.bomb);

            this.physics.add.overlap(
                this.bomb,
                this.land,
                this.overlap,
                this.shouldProcess, this);
        }
        // action on overlap
        overlap(bomb, land) {
            // remove bomb on contact
            let {x, y} = bomb.body.center;
            bomb.destroy();
            // create crater on old bomb position
            this.createCrater({x, y});
            // create new bomb 
            this.createBomb();
        }
        // checks if bomb hits land
        shouldProcess(bomb, land) {
            let x = Math.floor(bomb.body.center.x - land.x);
            let y = Math.floor(bomb.body.center.y - land.y);
            return this.textures.getPixelAlpha(x, y, "currentLand") === 255;
        }
        // create crater 
        createCrater({ x, y }) {
            this.baseCanvas.context.beginPath();
            this.baseCanvas.context.arc(x- this.land.x, y - this.land.y, 23, 0, Math.PI * 2, false);
            this.baseCanvas.context.fill();
            this.baseCanvas.update();
        }
        
        update(){
        
            if(this.bomb && this.bomb.body.y > 160){
                this.bomb.destroy();
                this.createBomb();
            }
        }
    }
    
 var config = {
    type: Phaser.AUTO,
    width: 500,
    height: 153,
    physics: {
      default: "arcade",
          arcade: {
              gravity: { y: 100 }
          }
    },
    scene: [Scene],
    banner: false
}; 

new Phaser.Game(config);

<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.js">
</script>