let app = new PIXI.Application({ width: 400, height: 400, backgroundColor: 0x424242 });
document.body.appendChild(app.view);

const graphics = new PIXI.Graphics();

// Прямоугольник
graphics.beginFill(0xDE3249);
graphics.drawRect(50, 50, 100, 100);
graphics.endFill();

// lineStyle(0) необходим, чтобы нарисовать круг без внешней обводки
graphics.lineStyle(0);
graphics.beginFill(0xDE3249, 1);
graphics.drawCircle(100, 250, 50);
graphics.endFill();

// А так мы нарисуем круг без заливки. Кольцо
graphics.lineStyle(2, 0xFEEB77, 1);
graphics.beginFill(0, .5);
graphics.drawCircle(250, 250, 50);
graphics.endFill();

graphics.interactive = true;
graphics.buttonMode = true;
graphics.on('click', (event) => { console.log('Click on shape'); });

app.stage.addChild(graphics);