basic PIXI example

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>Pixi.JS Game</title>
  
  <!-- LOAD PIXI.JS & COLLISION DETECTION & jQuery SUPPORT -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.6/pixi.min.js"></script>
	<script src="https://cdn.rawgit.com/kittykatattack/bump/2fe38b76/bin/bump.js"></script>
	<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
	
	<!-- LOAD ANY CUSTOM CSS RULES THAT MIGHT BE IN THE style.css FILE -->
	<link rel="stylesheet" type="text/css" href="style.css">
  
</head>
<body>
  
  <!-- LINK THE JavaScript FILE, DON'T WRITE ANY JavaSript HERE!! -->
  <script type="text/javascript" src="script.js"></script>
</body>
</html>


  

var renderer = PIXI.autoDetectRenderer(720, 364, 
{ backgroundColor: 0xffffff, antialias: true });
document.body.appendChild(renderer.view);

// Create the main stage for your display objects
var stage = new PIXI.Container();

var ctx = new PIXI.Graphics();




ctx.interactive = true;
// Set the fill color
ctx.beginFill(0xff0000); // Red

// Draw a circle
ctx.drawCircle(60, 185, 40); // drawCircle(x, y,

// Applies fill to lines and shapes since the last call to beginFill.
ctx.endFill();

 //ctx.clear();

 stage.addChild(ctx);  
 renderer.render(stage);
// animate();
    
    
    
function animate() {
    //Render the stage
    renderer.render(stage);
    requestAnimationFrame(animate);
}

/* Styles go here */

* {
  padding: 0;
  margin: 0;
}

#stage {
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
}