CODEWITHSUNDEEP
javascripthtmlcanvasscrollbarp5.js
Hugo
Hugo

Reputation: 479

p5.js canvas adds unwanted scrollbar

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.

Upvotes: 2

Views: 2735

Answers (2)

cubesareneat
cubesareneat

Reputation: 322

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;
}

Upvotes: 1

Munim Munna
Munim Munna

Reputation: 17546

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;

Upvotes: 3

Related Questions