[ENGINE ONLY] Resize Canvas

Help & Support
1

Hi, wenn I try the example in my Vue.js app using the resizeCanvas() method
I received errors :frowning: What am I doing wrong here?

const canvas = this.$refs.mainStage;

…

// Fill the available space at full resolution
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
app.setCanvasResolution(pc.RESOLUTION_AUTO);

// Ensure canvas is resized when window changes size
window.addEventListener(‘resize’, () =>
app.resizeCanvas((canvas.width, canvas.height))
);

resizeCanvas

2

Hi @iso74,

I think first there is a syntax error in your last command, double parenthesis, try like this:

app.resizeCanvas(canvas.width, canvas.height);

Now, do you have a canvas variable somewhere in your code? Make sure you have that so both arguments are properly filled.

3

Try const canvas = this.$refs.mainStage.$el; (or .el, I forgot)

4

@Leonidas Yes you are right with the synthax, also yes I have a canvas var, but still on page load CTRl+F5 it throws the error. Not when the ap is once loaded. For now I didn’t do anything fancy with PlayCanvas. I assume its a Vue.js thing using this window.addEventListener which is maybe not the Vue way…

5

No @Ivolutio this leads to undefined and also the PlayCanvas app is not instanciated.

6

Hey people its maybe offtopic and a Vue.js problem. Anyway thanks!

7

I am pretty sure you will need the DOM element to access width/height. So try running this after Vue has completed setting up the DOM (maybe look for vue nextTick).

8

@Ivolutio As thought its a Vue problem, it is working now:

mounted() {
window.addEventListener(‘resize’, this.resizeCanvas);
},

destroyed() {
window.removeEventListener(‘resize’, this.resizeCanvas);
},

1 Like