Updating BitmapData loaded into a RenderTexture

[pixelburp]

Apologies if this has either been asked before, or I'm misunderstanding how to use RenderTextures

I have a renderTexture that's outputting the contents of a Phaser.Image(), which in turn contains an instance of Phaser.BitmapData().

In my update() loop, I want to update the position of some geometry drawn in the BitMapData, but those changes are never seen in the RenderTexture. What would be the reason for this?

Like I said I could be misunderstanding how & why you might want to use a RenderTexture, but this portion of my code will be quite expensive & updated regularly - so it seemed like a good idea to pass this logic out to the GPU if possible, which is what a RenderTexture allows, right? Am open to some better ideas if I do indeed have the wrong idea!

Below is the code: it's written in TypeScript and the class extends Phaser.Sprite(), so hopefully it makes sense even to those only familiar with JS. As you can see in my update() I'm redrawing a bitmapData.circle() with a new x position, then rendering back to the RenderTexture again.

However, the circle never moves from its original position of 0. If I console.log out the x value, it's clearly update per tick.

 

  constructor(game: Phaser.Game, map: any) {
    const texture = new Phaser.RenderTexture(game, map.widthInPixels, map.heightInPixels, key);
    const bitmap = new Phaser.BitmapData(game, 'BITMAP', map.widthInPixels, map.heightInPixels);
    super(game, 0, 0, texture);

    this.bitmap = bitmap;
    this.image = new Phaser.Image(game, 0, 0, this.bitmap);
    this.texture = texture;
    // Other code to add this .Sprite() to the stage.
  }

  private update() {
    const bitmap = this.bitmap;

    bitmap.clear();
    bitmap.circle(x, 100, 50, 'rgb(255, 255, 255)');

    this.texture.render(this.image);
    x += 10;
  }