PixyJs. Why does the Graphics object have x and y =0?

Question

JavaScript

let app = createfield(60,10,10);
function createfield(seg_size,stage_height, stage_width) {
 let app = new  PIXI.Application(
     {
         width:seg_size * stage_width,
         height:seg_size * stage_height,
         antialias: true,    // default: false
         transparent: false, // default: false
         resolution: 1
     });
    PIXI.loader.load(function () {
       let cur_x=0;
       let cur_y=0;
       for(let i=0;i<stage_height;i++){
           for(let i=0;i<stage_width;i++){
               let rectangle = new PIXI.Graphics();
               rectangle.beginFill(0x66CCFF);
               rectangle.lineStyle(4, 0xFF3300, 1);
               rectangle.drawRect(cur_x,cur_y,seg_size,seg_size);


               rectangle.endFill();
               rectangle.interactive = true;
               rectangle.buttonMode = true;

               app.stage.addChild(rectangle);
               
               rectangle.on('mousedown', function () {
                   console.log(this.x);
               });
               cur_x+=seg_size;
           }
           cur_x=0;
           cur_y+=seg_size;
       }

    });
    return app


}

This function creates an Application which is filled with squares. I need that when I click on the square, I get its coordinates, but when I get x or y via this.x(this.position.x) these values ​​are zero.
I simply output this, and the x and y of the object are zero everywhere. Why is that? And how to get his position?

Answer 1

Why? Well, probably because it is the default value. If you want it to be not 0 - instead of drawing rectangles, the devil knows where to do the appropriate transformation, and draw the rectangle itself at (0, 0). That is, instead of
will

rectangle.drawRect(0, 0, seg_size, seg_size);
rectangle.setTransform(cur_x, cur_y);