* {
  color: #666;
  font-family: Arial, Helvetica, Sans-Serif;
}
let width = 480;
let height = 240;

// create app
let app = new PIXI.Application({
  width: width,
  height: height,
  antialias: true,
  backgroundColor: 0xEEEEEE
});

// add canvas to HTML document
document.body.appendChild(app.view);

// draw a circle
let myCircle = new PIXI.Graphics();
myCircle.beginFill(0xCC3333);
myCircle.drawCircle(240, 120, 48); // x, y, radius
myCircle.endFill();
app.stage.addChild(myCircle);

// draw a rectangle
let myRect = new PIXI.Graphics();
myRect.lineStyle(4, 0xEEBB00);
myRect.drawRect(0, 0, 48, 48); // x, y, width, height
app.stage.addChild(myRect);

// change myRect location and size
// after adding it as child of stage
myRect.width = 56;
myRect.height = 56;
myRect.x = width / 2;
myRect.y = height / 2;

// create a text style
let textStyle = new PIXI.TextStyle({
  fill: '#DD3366',
  fontFamily: 'Open Sans',
  fontWeight: 300,
  fontSize: 16
});

// render text
let tagline = new PIXI.Text('Morning Coffee!', textStyle)
tagline.anchor.set(0.5);
tagline.y = height - 20;
tagline.x = width / 2;
app.stage.addChild(tagline);

// load an image
let coffee = new PIXI.Sprite.from('https://lh6.googleusercontent.com/vug27NYtoykWNebijkWTUXX0sB1psOGcI8dQicNsX9jDglEeJtNaRvqUEKAzZ2SFv2R47SN_k-2WIF7RYz2F=w1728-h902');
app.stage.addChild(coffee);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

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