Full screen issue, white canvas - keyPressed

p5.js Beginners
1

Hi guys, I am an absolutely newbie of p5js.

I am having trouble when I play my sketch in full screen, I attach an example

Schermata 2021-10-13 alle 09.05.36
Schermata 2021-10-13 alle 09.05.361678×1048 50.5 KB

I set

function setup() {
	createCanvas(windowWidth, windowHeight);
		background(0);

and then

function mousePressed() {
 fullscreen(true); 
}

Can you tell me what’s wrong, plz?

1 Like
2

When you try this code you should see the issue.

function setup() {
  createCanvas(windowWidth, windowHeight);
  background(0);
}

function draw() {}
function mousePressed() {
  fullscreen(true);
  background(220);
}

The short version is that just because you used fullscreen(), it doesn’t mean the canvas will change its size. It will only put you into a fullscreen view, while the canvas stays the same size. What you are looking for is a way to resize the canvas.
https://p5js.org/reference/#/p5/resizeCanvas

I hope this helps!
(To make the program resize, first enter fullscreen and after that call the function resizeCanvas(). Play around with it a bit and you should be able to make it fit your needs)

2 Likes
3

Thanks for your tips

I partially solved adding::

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);

and in the index.html

 <style>
  body {
    margin:0;
    padding:0;
    overflow: hidden;
  }
  canvas {
    margin:auto;
  }
</style>

but I would like also to add a fullscreen with the key F

function keyPressed() {
 if(key == 'f'){
 let fs = fullscreen();
    fullscreen(!fs);
    }
}

This is not working…

1 Like
4

Try to create an IF sentence with this:
https://p5js.org/reference/#/p5/displayWidth

so use this:

if fullscreen => resizeCanvas(displayWidth,displayHeight);
else => resizeCanvas(windowWidth,windowHeight);

hope this helps!

5

Thanks man, for the support!

It works, I just would like to add a keyboard shortcut to enter in the fullscreen mode, this is not working actually

function keyPressed() {
 if(key == 'f'){
 let fs = fullscreen();
    fullscreen(!fs);
    }
}
6

it works for me in the p5js web editor. don’t forget to click on the canvas before pressing F. It requires focus to catch keystrokes