Change the size of the canvas in GameLab



Several of my students would like to have a canvas bigger than 400x400 to use while making their games. I know canvas size can be changed in p5.js in the setup() function with createCanvas(), but GameLab doesn’t have createCanvas() defined/available(?) and World.width and World.height are both read-only.

If it’s not possible at all, I understand, but if it’s just a matter of extra work, I have significant javascript background (though less experience with p5 specifically) and the students who are asking for this are quite bright and willing to learn how.




I don’t know if this is available either, but I had a few students who wanted more and it was worth the time to teach them about and p5 so they could create any game AND they were able to show/encourage the rest of the students that might feel like going on isn’t “real programming” because it’s on a website - it is and we can (as you know) take the same code and show them.

Hope that helps and I’ll bump up the question to see if the canvas can be changed,



It’s possible to resize the canvas, but not in a super satisfying way at the moment. The p5.js resizeCanvas command works in Game Lab, but the display area div is hard coded to assume a 400x400 canvas. Making the canvas size resizable is on our engineering backlog, but I don’t have an ETA for it. Here’s a quick example of how the command works - use the down arrow to make the canvas small and the up arrow to make it large - if you use the chrome inspector you’ll see that the canvas is actually larger than what you can see on screen.