small white line at the bottom of the screen using p5.js-CodePudding

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/[email protected]/lib/p5.min.js"></script>
    <!-- Uncomment below line to enable p5.sound -->
    <!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/addons/p5.sound.min.js"></script> -->
</head>

<body>
    <script src="sketch.js"></script>
</body>

</html>

This is how it looks like locally

p5.js white line at the bottom

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

CodePudding user response：

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.

CodePudding user response：

Changing the styles to

        * {
            padding: 0;
            margin: 0;
        }

        body {
            overflow: hidden;
        }

Fixed the issue