title: Why is the container of lines not centered? - Pixi.js
body: <p>I just got started with Pixi.js. I want to put multiple lines in the center of the canvas and rotate them. So I put the lines in a container and set the pivit point on the center of the container. Then I set the position of the container to the center of the canvas, but it is not centered. Why?</p>
  
  <p>I want the output not to be <a href="https://i.stack.imgur.com/VBTPvs.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VBTPvs.png" alt="How I want the output not to be"></a> but
  <a href="https://i.stack.imgur.com/F3Nass.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/F3Nass.png" alt="For the output I want the 2 red lines be centered"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var app = new PIXI.Application({ 
    width: 200,
    height: 200,
    antialias: true
  });
  app.renderer.backgroundColor = 0x061639;
  document.body.appendChild(app.view);
  
  function createLine(offset){
    let line = new PIXI.Graphics()
    line.lineStyle(25, 0xBB0000);
    line.x = offset;
    line.y = 0;
    line.moveTo(0, 0);
    line.lineTo(0, 100);
    return line;
  }
  
  let line1 = createLine(0);
  let line2 = createLine(50);
  let container = new PIXI.Container();
  container.addChild(line1, line2);
  container.pivot.x = container.width/2;
  container.pivot.y = container.height/2;
  container.x = app.screen.width/2;
  container.y = app.screen.height/2;
  //container.rotation = Math.PI/180*45; //rotate 45 degrees
  
  app.stage.addChild(container);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.8.2/pixi.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://jsfiddle.net/e5j1ftwb/3/" rel="nofollow noreferrer">JSFiddle</a></p>