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

Question

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?

score 10 · Answer 1 · answered Jun 18 '21 at 05:10

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/p5@1.3.1/lib/p5.min.js"></script>

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

1 Answers1