[ENGINE ONLY] Resize Canvas

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

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


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.

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

@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…

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

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

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

@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