[SOLVED] When Maximized, the 'background()' is slightly too large

p5.js Coding Questions
1

I making a clock. I hope to make it a screen saver (someday).

// Problem: When Maximized, the ‘background()’ is slightly too large for the
// screen and I get unwanted scrollbars.
// When in fullscreen, I get no scrollbars but I get a ~100 pixel high white
// area at the bottom of the screen. The background is now not tall enough.

// Solution(part 1): DEMO of fullscreen (F11) background without scroll bars.
// I used ‘windowWidth’ to keep box centered when window is resized and I made
// windowWidth and windowHeight smaller by 6 pixels.

// Solution(part2): To remove the large white area at the bottom of the screen when in
// fullscreen (F11), I replaced line in HTML code:
// <body style="background-color:black;">
// and the white area at bottom of the screen went away.

// Tested in in Linux Mint 19, Firefox 63.0.3, Chromium v 70.0.3538.110 and Codepen(sort of).
//

var i = 6;                    //change to '0' to get unwanted scrollbars

function setup() {
  createCanvas(windowWidth-i,windowHeight-i);  
  frameRate(1);               // saves my poor old processor
}

function draw() {
 background(0);                // doesn't quite work in fullscreen (F11).
                                         // ...but Still needed to cleanup when resizing

  var xd = (windowWidth-i) / 2 - 400 / 2 ;  // center the blue circle.
  var yd = (windowHeight-i) / 2 - 400 / 2;
  translate(xd, yd);

  fill(0, 0, 160);

  ellipse(200,200,400,400);

// removed the clock stuff for brevity.
}

I’m new to this so please let me know if I missed something somewhere. Thanks.

1 Like
2

This can be solved with a couple lines of css in the html page. Below is what I include in all my full page applications. The overflow hidden gets rid of scroll bars however be careful. If you make the canvas bigger than the window you might not notice because it just never shows any scroll bars. With this code you can use createCanvas(windowWidth,windowHeight); with no problem.

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

Thank you for the quick reply. I found that this does remove the scrollbars but I still had to add the
<body… > to the HTML page to get rid of the white area at the bottom of the full screen view.

I remember Dan Shiffman had a few videos on HTML and DOM manipulation so I might look over those to see if they can help.

4

You might checkout windowResized() if you’re having problems with white space when you press F11. If you throw the following code in your sketch it always updates to the correct size.

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}
1 Like
5

Thank You. This does take care of the F11 problem.

Edit: I also found the fullscreen() function. It seems quicker than F11 and my tablet doesn’t have a physical keyboard.

Marked as “Solved”

2 Likes