title: PixiJS Sprite not loading
body: <p>I've seen this question asked many times here already, but no replies to those posts helped me out: I'm trying to load a Sprite using the PixiJS engine, but it's not showing up despite it being recognised and loggable using <strong>console.log()</strong>. What am I doing wrong?</p>
  
  <p>I've followed the tutorial from this URL:</p>
  
  <p><a href="https://github.com/kittykatattack/learningPixi#introduction" rel="nofollow noreferrer">https://github.com/kittykatattack/learningPixi#introduction</a></p>
  
  <p>My code is as follows:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
          &lt;title&gt;TITLE HERE&lt;/title&gt;
  
          &lt;link rel='stylesheet' type='text/css' href='style/style.css'&gt;'
          &lt;script src="js/pixi.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/init.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
          &lt;script&gt;
              init();
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>init.js</strong></p>
  
  <pre><code>var sprites = {};
  var stage = new PIXI.Container();
  var renderer;
  
  function init(){
      createCanvas(288, 288, true);
  }
  
  function createCanvas(width, height, autoResize){
      //Create the renderer
      renderer = PIXI.autoDetectRenderer(width, height);
      renderer.autoResize = autoResize;
      renderer.view.setAttribute("id", "canvas");
  
      //Add the canvas to the HTML document
      document.body.appendChild(renderer.view);
      newSprite("assets/tilesheet.png", "tilesheet");
  }
  
  function newSprite(src, name){
      var texture = PIXI.Texture.fromImage(src);
      var sprite = new PIXI.Sprite(texture);
  
      sprites[name] = sprite;
      stage.addChild(sprites["tilesheet"]);
      renderer.render(stage);
  }
  </code></pre>
  
  <p>And just in case</p>
  
  <p><strong>style.css</strong></p>
  
  <pre><code>body{
      background-color: #a9a9a9;
  }
  
  #canvas{
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 0;
      margin: auto;
      display: block;
      position: absolute;
      box-shadow: 0.5em 0.5em 0 0 #777;
  }
  
  /* &lt;TABLET&gt; */
  @media (min-width: 61.5rem){
      #canvas{
          width: 25em;
          height: 25em;
          box-shadow: 1em 1em 0 0 #777;
      }
  }
  
  /* &lt;DESKTOP/TV&gt; */
  @media (min-width: 80.0rem){
  
  }
  </code></pre>
  
  <p>This is my folder layout:</p>
  
  <pre><code>Project
    |-assets
    | \-tilesheet.png
    |-js
    | |-init.js
    | \-pixi.min.js
    |-style
    | \-style.css
    |-index.html
  </code></pre>
  
  <p>I hope someone can help me out.</p>
  
  <h2>UPDATE</h2>
  
  <p>The code now works as it should. Based on feedback by <em>themoonrat</em> (accepted answer), the code now looks like this:</p>
  
  <pre><code>var sprites = {};
  var masks = {};
  var stageWidth = 288;
  var stageHeight = 288;
  var spriteWidth = 32;
  var spriteHeight = 32;
  var gridWidth = stageWidth/spriteWidth;
  var gridHeight = stageHeight/spriteHeight;
  
  var stage = new PIXI.Container();
  var renderer = PIXI.autoDetectRenderer(stageWidth, stageHeight);
  
  function init(){
      renderer.view.setAttribute("id", "canvas");
      document.body.appendChild(renderer.view);
  
      for(var x = 0; x &lt; gridWidth; x++){
          for(var y = 0; y &lt; gridHeight; y++){
              newSprite('assets/tilesheet.png', 'tilesheet'+(x+y), x*spriteWidth, y*spriteHeight);
          }
      }
  
      sprites['tilesheet2'].position.x = 32;
      sprites['tilesheet2'].position.y = -32;
  
      console.log(sprites);
  
      // start updating
      update();
  }
  
  function newSprite(src, name, x, y){
      var texture = PIXI.Texture.fromImage(src);
      var sprite = new PIXI.Sprite(texture);
  
      sprite.anchor.x = 0;
      sprite.anchor.y = 0;
  
      sprite.position.x = x;
      sprite.position.y = y;
  
      sprites[name] = sprite;
      stage.addChild(sprite);
  }
  
  function update() {
      requestAnimationFrame(update);
  
      renderer.render(stage);
  }
  </code></pre>
  
  <p>The main difference is the inclusion of the <strong>update()</strong> function. Where, as <em>themoonrat</em> suggested, the <strong>requestAnimationFrame()</strong> is situated</p>