index.html

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>hello pixi!</title>
        <script src="js/pixi.js"></script>
    </head>
    <body>
    
    <script type="text/javascript">
    
        var renderer = PIXI.autoDetectRenderer(800, 600,{backgroundColor : 0x1099bb});
        document.body.appendChild(renderer.view);
        
        // create the root of the scene graph
        var stage = new PIXI.Container();
        
        // create a texture from an image path
        var texture = PIXI.Texture.fromImage('idp.jpg');
        
        // create a new Sprite using the texture
        var logo = new PIXI.Sprite(texture);
        
        // center the sprite's anchor point
        logo.anchor.x = 0.5;
        logo.anchor.y = 0.5;
        
        // move the sprite to the center of the screen
        logo.position.x = 400;
        logo.position.y = 300;
        
        stage.addChild(logo);
        
        // start animating
        animate();
        function animate() {
            requestAnimationFrame(animate);
        
            // render the container
            renderer.render(stage);
        }
        
    </script>

  </body>
</html>