Jump to content

PIXI View Overflowing Parent Flex Container


Recommended Posts

I am building a Scratch-like application in Vue with PIXI as my rendering engine, but I am having trouble getting my WebGL view to stay within its parent container.




Here is what my web page looks like before I add the canvas. The empty white area with id=canvasWrapper is where I want to put my canvas.

    <v-container class="pa-0 flex-grow-1 d-flex flex-column">
            class="flex-grow-0 mb-2 py-1 d-flex align-center justify-space-around"
            <v-btn @click="gameStart" :disabled="this.gameStarted" color="success">
            <v-btn @click="gameStop" :disabled="!this.gameStarted" color="error">
        <v-sheet id="canvasWrapper" class="flex-grow-1">
             <!-- The canvas will go here! -->

The classes like 'flex-grow-1' are provided by Vue if you are not familiar, but they provide the same functionality as the equivalent CSS. In this case, "flex-grow-1" allow the v-sheet to fill the rest of the area.


So far this looks good, but after adding a canvas and linking it to PIXI it looks like this:




I attach my PIXI instance with the following code

const cvs = document.getElementById('canvas')
const wrapper = document.getElementById('canvasWrapper')
this.app = new PIXI.Application({
    view: cvs,
    width: wrapper.clientWidth,
    height: wrapper.clientHeight,
    transparent: true,
    roundPixels: false,

To my understanding, this should set the size of the view to the size of the canvasWrapper. However, this is causing the canvas wrapper to grow.

What is the proper solution to this seemingly basic task?

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...