const canvas = document.querySelector('#canvas');

const pixi = new PIXI.Application({
  view: canvas,
  backgroundColor: 0xffffff,
});

const protagonistWidth = 100;
const protagonistEyeRadius = 10;
const protagonistEyesDist = 40;

const protagonist = new PIXI.Container();
const protagonistBody = new PIXI.Graphics();
protagonistBody.beginFill(0xffb6b9);
protagonistBody.drawRoundedRect(0, 0, protagonistWidth, protagonistWidth, 20);
protagonistBody.endFill();
protagonist.addChild(protagonistBody);
const protagonistEyes = new PIXI.Graphics();
protagonistBody.beginFill(0x000000);
protagonistBody.drawCircle(protagonist.width / 2 - protagonistEyesDist / 2, 30, protagonistEyeRadius);
protagonistBody.drawCircle(protagonist.width / 2 + protagonistEyesDist / 2, 30, protagonistEyeRadius);
protagonistBody.endFill();

protagonist.pivot.set(protagonist.width / 2, protagonist.height);
protagonist.position.set(pixi.screen.width / 2, pixi.screen.height);

pixi.stage.addChild(protagonist);