title: How to move a Graphics object around the stage in PIXI JS?
body: <p>I am trying to animate a figure and adding a health bar over it. I created the figure from a sprite (<code>new PIXI.sprite()</code>) and the health bar from a graphics object (<code>new PIXI.Graphics()</code>).</p>
  
  <p>I am able to move the sprite by setting its X,Y coordinates, but when I do the same with the Graphics object it is always displaced, it looks like its origin is the current position of the sprite. See the following picture. The health bar should be above the figure.</p>
  
  <p><a href="https://i.stack.imgur.com/50RK3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/50RK3.png" alt="enter image description here"></a></p>
  
  <pre><code>var app = new PIXI.Application(windowWidth, windowHeight, {backgroundColor: 0x1099bb});
  var prey = new PIXI.Sprite(texturePath);
  var healthBar = new PIXI.Graphics();
  healthBar.beginFill(0x00BB00);
  healthBar.lineStyle(1, 0x000000);
  healthBar.drawRect(prey.x - spriteLength, prey.y - spriteLength, spriteLength, 5);
  prey.energyBar = healthBar;
  
  app.stage.addChild(prey);
  app.stage.addChild(healthBar);
  
  prey.energyBar.position.set(prey.x,prey.y);
  </code></pre>
  
  <p>How can I set the position of the health bar to be right above the figure?</p>