how do i make the canvas perfectly fit to the window size in p5

Asked 18/6, 2021 at 4:23 Answered 12/9, 2023 at 3:46

i want to make the p5 canvas fit perfectly to the window size, but whenever I use windowWidth and windowHeight , the canvas seems to be bigger:

is there any way to fix this?

Faus answered 18/6, 2021 at 4:23 Comment(0)

You need to turn off margin and padding for the <html> and <body> tags with CSS (this removes the white border around the canvas), and turn off the vertical scrollbar.

Also, if someone changes the size of the window, you'll want to handle that, which is done easily with the windowResized event.

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

function draw() {
  background(200);
}

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

html,
body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.min.js"></script>

Lifelike answered 18/6, 2021 at 5:10 Comment(0)

i made margin and padding 0 still canvas was looking little bigger but i tried this

body{
  overflow:hidden;
  }

and it worked. the scrollbars were reducing size of viewport so hiding them make canvas fit perfectly.

Thorson answered 12/9, 2023 at 3:46 Comment(0)

Recommended topics

Hot tags