<canvas id="canvas"></canvas>
#canvas {
  border: 1px solid black;
}
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);
View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.2.1/pixi.min.js