Path not clearing in update function

[jurbank]

I'm attempting to clear the path within the update function, you can see below:

But for some reason, the path won't clear
 

class Gun extends Phaser.Physics.Matter.Image {
  constructor(config, scene) {
    super(config.world, config.x, config.y, null, null, config.options);

    this.scene = scene;
    this.ship = this.scene.player

    this.graphics = this.scene.add.graphics();
    this.path = new Phaser.Curves.Path(0, 0);
  }
  update() {
    this.graphics.clear()

    this.graphics.lineStyle(1, 0xcccccc, 1);

    this.path.lineTo(this.ship.x, this.ship.y);
    this.path.lineTo(this.scene.input.mousePointer.x, this.scene.input.mousePointer.y);
    this.path.draw(this.graphics)
  }
}

export default Gun;

Here's the live demo - https://codepen.io/jurbank/project/live/AmPBBN/
And the project - https://codepen.io/jurbank/project/editor/AmPBBN

Any thoughts?

Thanks!

[iKest]

use preUpdate instead update method.

[jurbank]

Thanks iKest! 

I tried running preUpdate() in the game scene, while passing in this.gun.preUpdate() which clears the graphics (this.graphics.clear())

Not only did it not work, it also significantly dropped the frame rate.

[iKest]

you no need manualy call preUpdate method in scene update loop. it's do automatically if object isActive