title: Adding image to page using PIXI
body: <p>I am using a simple example from PIXI</p>
  
  <p>The link to the example is:
  <a href="http://www.goodboydigital.com/pixi-js-tutorial-getting-started/" rel="nofollow">http://www.goodboydigital.com/pixi-js-tutorial-getting-started/</a></p>
  
  <p>So I changed it a bit and the code in the script tag is now this:</p>
  
  <pre><code>&lt;script&gt;
        // create an new instance of a pixi stage
        var stage = new PIXI.Stage(0x66FF99);
        console.log(stage);
        // create a renderer instance.
        var renderer = PIXI.autoDetectRenderer(400, 300);
        console.log(renderer);
        // add the renderer view element to the DOM
        document.body.appendChild(renderer.view);
  
  
        // create a texture from an image path
        var texture = PIXI.Texture.fromImage("bunny.png");
        // create a new Sprite using the texture
        var bunny = new PIXI.Sprite(texture);
  
        // center the sprites anchor point
        bunny.anchor.x = 0.5;
        bunny.anchor.y = 0.5;
  
        // move the sprite t the center of the screen
        bunny.position.x = 200;
        bunny.position.y = 150;
  
        stage.addChild(bunny);
        renderer.render(stage);
  
        // requestAnimFrame( animate );
  
        function animate() {
            requestAnimFrame(animate);
            // render the stage  
            renderer.render(stage);
        }
  &lt;/script&gt;
  </code></pre>
  
  <p>So instead of using requestAnimFrame( animate );
  I am using renderer.render(stage);  instead.</p>
  
  <p>What happens is on FF 32.0.3 it runs fine the bunny.png appears on the screen inside the stage. </p>
  
  <p>On Chrome Version 37.0.2062.124 m (64-bit), the stage appears but no bunny.</p>
  
  <p>I am also serving up the webpage using Xampp so the path is via a webserver, so no CORS issue using the File path.</p>
  
  <p>Does anyone know why this happens?</p>
  
  <p>Thanks,
  Jim</p>