Autoresize PIXI.autoDetectRenderer to size of parent element

[cnwerb]

Hey everyone, first post here!

I'm putting together a little web GUI using Angular2 and pixi, and I'm looking for a way to have the pixi canvas automatically resize to be inline with its parent element (in this case it's an angular2 component).

Below is the angular component that creates the pixi canvas and places it into the DOM. You can see that right now its size is being set to a fixed 256, 256 by the stub methods I created. What I want is the canvas to automatically fill all of the available space of it's parent container when it loads, and also resizes responsively with different resolutions, etc. Similar to the behaviour of the CSS { height: 100%, width 100% }

@Component({
  selector: 'pixi-component',
  templateUrl: './pixi-component.component.html',
  styleUrls: ['./pixi-component.component.css']
})
export class PixiComponentComponent implements OnInit {

  constructor() { }

  ngOnInit() {
    this.generatePixiCanvas();
  }

  generatePixiCanvas() {
      //Create the canvas and add it the DOM...
      var renderer = PIXI.autoDetectRenderer(this.getParentDivHeight(), this.getParentDivWidth());
      document.getElementById('pixi-component').appendChild(renderer.view);
      
      //Create a container object called the `stage` and render it...
      var stage = new PIXI.Container();
      renderer.render(stage);
  }

  getParentDivHeight() {
    return 256;
  }

  getParentDivWidth() {
    return 256;
  }
}

 

 

Heres a snippet of the HTML in case you want to see it:

 

<div id="canvas-pane" class="flex-item flex-container flex-container-vertical">
    <div id="canvas-pane-header" class="flex-item">
        <div id="canvas-pane-header-title">

        </div>
    </div>
    <div id="canvas" class="flex-item">
        <pixi-component id="pixi-component"></pixi-component>
    </div>
</div>

 

 

How can I achieve this goal?

[cnwerb]

I solved the issue here: http://stackoverflow.com/questions/40985957/how-to-dynamically-resize-a-pixijs-html-canvas-within-angular-component/40988532#40988532