The exactly same idea puts a rectangle along the centerline of it though cannot put an image in the right place, how do I fix it?

I’m trying to draw some kind of a “ray” with Phaser 3.

I started the experiment with a simple rectangle to represent the ray. Here is the code.

  this.add.circle(90, 290, 10, 0xf00000);
  this.add.circle(290, 190, 10, 0xf00000);
  let angle = Phaser.Math.Angle.Between(90, 290, 290, 190)
  let reference = this.add.rectangle(90, 290, 600, 5, 0x00f000).setOrigin(0);
  reference.rotation = angle

The line doesn’t start at the center of its starting point.

enter image description here

I know the reason is Phaser draws the line (actually rectangle) starting top-left 90, 290 where the centerline of the rectangle is supposed to start at.

To fix it, I just need to change y of the top-left

let reference = this.add.rectangle(90, 290-5/2, 600, 5, 0x00f000).setOrigin(0);

where the 5 in 5/2 represents the height of the green rectangle.

And then I got what I want

enter image description here

However, things got complicated when I try to move something along the “ray”.

Here is the code.

var game = new Phaser.Game({
  scene: {
    preload: preload,
    create: create
  }
});

function preload() {
  this.load.path = 'https://raw.githubusercontent.com/liyi93319/phaser3_rpg/main/part1/assets/';
  this.load.atlas('bolt', 'bolt_atlas.png', 'bolt_atlas.json');
}

function create() {
  this.add.circle(90, 290, 10, 0xf00000);
  this.add.circle(290, 190, 10, 0xf00000);
  let angle = Phaser.Math.Angle.Between(90, 290, 290, 190)
  let reference = this.add.rectangle(90, 290 - 5 / 2, 600, 5, 0x00f000).setOrigin(0);
  reference.rotation = angle
  
  let bolt = this.add.sprite(90, 290-76/2, 'bolt', 'bolt_strike_0002').setOrigin(0);
  bolt.rotation = angle;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>

I just added 2 lines of code based on the previously working code, with the same idea

  let bolt = this.add.sprite(90, 290-76/2, 'bolt', 'bolt_strike_0002').setOrigin(0);
  bolt.rotation = angle;

the 76 in 76/2 represents the height of the bolt (rectangle) I put.

290 represents the y coordinate of the center of the starting point.

The exactly same idea puts the green rectangle along the centerline of it though cannot put the bolt in the right place (along the centerline of the green rectangle), why is that? What am I missing?

enter image description here