Getting Started

I. Including PixiJS

Include the PixiJS library in your project by linking to the PixiJS CDN. More info here.

<script src="https://pixijs.download/release/pixi.min.js"></script>

Create a script element in the <body> element that will contain the PixiJS code:

<body>
  <script>
     // code here
  </script>
</body>

II. Creating An Application

Define a PixiJS Application object which will handle the rendering and updating as well as create your root stage object. Optionally, you can specify width and height options (defaults are 800 x 600). List of options can be found here.

var app = new PIXI.Application({ width: 640, height: 360 });

Add the <canvas> element created by PixiJS to your document (called app.view).

document.body.appendChild(app.view);

III. Adding Display Objects

Next, we'll draw a simple circle which we will use to render to our canvas.

var circle = new PIXI.Graphics();
circle.beginFill(0x5cafe2);
circle.drawCircle(0, 0, 80);
circle.x = 320;
circle.y = 180;

This element is added to the app.stage element, the root-level instance of PIXI.Container which contains all elements to be rendered.

app.stage.addChild(circle);

IV. Now You're Cookin'

And that's it! To see the JSFiddle version of this example, click here.

download

Complete Code

<html>
  <head>
    <script src="https://pixijs.download/release/pixi.min.js"></script>
  </head>
  <body>
    <script>
      var app = new PIXI.Application(640, 360);
      document.body.appendChild(app.view);
      var circle = new PIXI.Graphics();
      circle.beginFill(0x5cafe2);
      circle.drawCircle(0, 0, 80);
      circle.x = 320;
      circle.y = 180;
      app.stage.addChild(circle);
    </script>
  </body>
</html>