0
195
Viewssmall white line at the bottom of the screen using p5.js
I am new to p5.js and I am just trying to create a full screen canvas but I am getting a small white line at the bottom of the screen and I can't figure out why
function setup() {
createCanvas(windowWidth, windowHeight);
//background(0);
}
function draw() {
background("#222");
ellipse(windowWidth / 2, windowHeight / 2, 100, 100);
fill("#07C");
noStroke();
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>p5.js starter</title>
<style>
body {
/* padding: 0; */
margin: 0;
overflow: hidden;
}
</style>
<script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/p5.min.js"></script>
<!-- Uncomment below line to enable p5.sound -->
<!-- <script src="https://cdn.jsdelivr.net/npm/p5@1.4.1/lib/addons/p5.sound.min.js"></script> -->
</head>
<body>
<script src="sketch.js"></script>
</body>
</html>This is how it looks like locally
If you open the image in new tab you can notice the issue
Edit : The issue is only happening in chrome it is fine in firefox and brave
·
Juan Pablo Isaza
2 answers
Answer question0
the first thing you should try doing is adding + 10 to windowHeight or whatever number that is enough to remove this white line, if that doesn't work then it might do with the browser you're using.
·
Juan Pablo Isaza
Report
0
Changing the styles to
* {
padding: 0;
margin: 0;
}
body {
overflow: hidden;
}
Fixed the issue
·
Juan Pablo Isaza
Report
Answer question