Strange Behavior of a rectangle

[guruyaya]

Hi friends.

I found some strange behavior while working on an app. This issue is demonstrated best on this codepen

As you can see, the update function is designed to update the width property, but as you also see - it also changes with position of the element - dragging it left. I can't figure out why.

Any advice you can offer on this?

Thanks in advance

Yair

[squilibob]

When you set the width of a rectangle like that it actually sets its scale to fit instead of reapplying the width. What you should do instead is clear and redraw the rectangle:

 

  create: function() {
    this.timeBarLength = 300;
    this.timeBar = this.add.graphics(0,0);
  },
  update: function(){
      if (this.timeBarLength) this.timeBarLength -= 1;
      this.timeBar
      .clear()
      .lineStyle(5, 0x0000FF, 90)
      .beginFill(0x00FF00)
      .drawRect(30, 60, this.timeBarLength, 30)
      .endFill()
  }

 

[guruyaya]

Thanks for your suggested fix. I'll apply it.