Jump to content

Autoresize PIXI.autoDetectRenderer to size of parent element


Recommended Posts

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% }

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

  constructor() { }

  ngOnInit() {

  generatePixiCanvas() {
      //Create the canvas and add it the DOM...
      var renderer = PIXI.autoDetectRenderer(this.getParentDivHeight(), this.getParentDivWidth());
      //Create a container object called the `stage` and render it...
      var stage = new PIXI.Container();

  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 id="canvas" class="flex-item">
        <pixi-component id="pixi-component"></pixi-component>



How can I achieve this goal?

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...