p5.js canvas adds unwanted scrollbar

user_11472946 0
Viewed 1782

I am creating a simple p5.js canvas using the values from it's parent like this:

// Canvas properties
var $musicscape = $("#musicscape");

// p5.js functions
function setup() {
    var canvas = createCanvas(
        $musicscape.outerWidth(),
        $musicscape.outerHeight()) ;
    canvas.id("canvas")
    canvas.parent($musicscape[0]);
}

My musicscape element has the following sass properties and takes on the right size without creating any scrollbars.

#musicscape
    position: absolute
    right: 0
    top: 0
    width: 50vw
    height: 100vh

Here is a jsfiddle which shows the error.

However, when I add the canvas which has the exact size as my html, body and #musicscape elements, a vertical scrollbar is added. The only way to remove it is to set the canvas width to $musicscape.outerHeight() - 3 which also creates a small white line at the bottom that isn't part of the canvas. How can I get rid of the vertical scrollbar while keeping the canvas to the size of its parent? I checked and there are no padding or margin anywhere on my page.

I am testing on Chrome btw.

p5.js scrollbar canvas html javascript
2 Answers

HTML canvas element is by default an inline element (list of inline elements). So even if you set it's height exactly same as it's parent it overflows because of line-spacing. To prevent it set canvas to a block level element in your SASS file.

#canvas
    display: block;
user_92763290

CSS Flexible Box Layout Module
index.html

<!DOCTYPE html>
    <html>
<link rel="stylesheet" href="noscrollbars.css">
    <head>
      <meta charset="UTF-8" />
      <script src="p5.js"></script>
      <script src="myscript.js"></script>
    </head>  <body>  <main> </main> </body>
</html>

noscrollbars.css

html, body {
    height: 100%;
}
    body {
    margin: 0;
    display: flex;
        
    justify-content: center;
    align-items: center;
}
user_149164140
Related