I'm not understanding why the bunny sprite is in wrong position when the parent has their coordinates changed. How can I make the bunny sprite stay in the same position as I did on the canvas, since I'm only extracting the image of landscape sprite?
const landscape_texture = await PIXI.Assets.load(
);
const bunny_texture = await PIXI.Assets.load("https://pixijs.io/examples/examples/assets/bunny.png");
const sprite = new PIXI.Sprite();
app.stage.addChild(sprite);
const landscape = new PIXI.Sprite(landscape_texture);
sprite.addChild(landscape);
//the problem is here
sprite.x = -150;
sprite.y = -150;
sprite.interactive = true;
sprite.on("pointerdown", async (e) => {
const { x, y } = e.getLocalPosition(sprite);
const bunny = new PIXI.Sprite(bunny_texture);
bunny.x = x - bunny.width / 2;
bunny.y = y - bunny.height / 2;
landscape.addChild(bunny);
//the final image
document.body.appendChild(await app.renderer.extract.image(landscape));
});