# Full screen issue, white canvas - keyPressed

**URL:** <https://discourse.processing.org/t/full-screen-issue-white-canvas-keypressed/32795>\
**Category:** Beginners\
**Created:** [October 13, 2021, 7:10am UTC](https://discourse.processing.org/t/full-screen-issue-white-canvas-keypressed/32795 "2021-10-13T07:10:34Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![u\_ro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/u_ro/32/14713_2.png) [@u\_ro](https://discourse.processing.org/u/u_ro)\
**Post date:** [October 13, 2021, 7:10am UTC](https://discourse.processing.org/t/full-screen-issue-white-canvas-keypressed/32795/1 "2021-10-13T07:10:34Z")

</div>

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](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/3cd08f38ccfde87ccc68cdb324ce8d31f9c167d0.jpeg)

I set

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

```

and then

```auto
function mousePressed() {
 fullscreen(true); 
}

```

Can you tell me what’s wrong, plz?

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [October 13, 2021, 7:17pm UTC](https://discourse.processing.org/t/full-screen-issue-white-canvas-keypressed/32795/2 "2021-10-13T19:17:46Z")

</div>

When you try this code you should see the issue.

```auto
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](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)

---

<div class="post-metadata">

**Author:** ![u\_ro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/u_ro/32/14713_2.png) [@u\_ro](https://discourse.processing.org/u/u_ro)\
**Post date:** [October 14, 2021, 4:24pm UTC](https://discourse.processing.org/t/full-screen-issue-white-canvas-keypressed/32795/3 "2021-10-14T16:24:38Z")

</div>

Thanks for your tips

I partially solved adding::

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

```

and in the index.html

```auto
 <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**

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

```

This is not working…

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [October 14, 2021, 7:03pm UTC](https://discourse.processing.org/t/full-screen-issue-white-canvas-keypressed/32795/4 "2021-10-14T19:03:33Z")

</div>

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

so use this:

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

```

hope this helps!

---

<div class="post-metadata">

**Author:** ![u\_ro](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/u_ro/32/14713_2.png) [@u\_ro](https://discourse.processing.org/u/u_ro)\
**Post date:** [October 14, 2021, 7:53pm UTC](https://discourse.processing.org/t/full-screen-issue-white-canvas-keypressed/32795/5 "2021-10-14T19:53:38Z")

</div>

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

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

```

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [October 15, 2021, 11:13am UTC](https://discourse.processing.org/t/full-screen-issue-white-canvas-keypressed/32795/6 "2021-10-15T11:13:39Z")

</div>

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