title: Draw Circle using Pixi.js v4 and Typerscript (IONIC 2)
body: <p>I am trying to write a class that draws a circle using PIXI.js. </p>
  
  <p>This is my home.ts class</p>
  
  <pre><code>import { Component, ViewChild, ElementRef } from '@angular/core';
  import { NavController } from 'ionic-angular';
  import { CanvasAnimations } from '../../canvas/Canvas'
  
  @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
  })
  export class HomePage {
  
    canvas = new CanvasAnimations();
    @ViewChild('canvasWrapper') MyCanvas:ElementRef;
    @ViewChild('homeContent') HomeContent:ElementRef;
  
    constructor(public navCtrl: NavController) {}
  
    ionViewDidLoad() {
      this.canvas.setCanvas(this.MyCanvas, window.innerWidth, window.innerHeight);
      this.canvas.generateCircle();  
    }
  }
  </code></pre>
  
  <p>And this is my CanvasAnimations class</p>
  
  <pre><code>import { ElementRef } from '@angular/core';
  import * as PIXI from 'pixi.js';
  
  export class CanvasAnimations {
  
      // Class Properties
       stage = new PIXI.Container();
  
      constructor() { }
  
      setCanvas(canvasElement: ElementRef, windowWidth: number, windowHeight: number) {
          var renderer = PIXI.autoDetectRenderer(windowWidth, windowHeight, { backgroundColor: 0x00FF00, antialias: true });
          canvasElement.nativeElement.appendChild(renderer.view);
          renderer.render(this.stage);
      }
  
      generateCircle() {
          var circle = new PIXI.Graphics();
          circle.beginFill(0x000000);
          circle.drawCircle(0, 0, 100);
          circle.endFill();
          circle.x = 100;
          circle.y = 130;
          this.stage.addChild(circle);
      }
  }
  </code></pre>
  
  <p>However I can see the canvas being rendered but not a circle and I don't understand why.. any suggestions? </p>