Unwanted scrollbar showing because of canvas

p5.js Coding Questions
1

I am creating a simple p5.js canvas using the values from it’s parent, which takes up exactly half the screen. When I add the canvas which has the exact size as my html , body and #musicscape elements, a vertical scrollbar is added (tested on Chrome) but I cannot figure out why or how to get rid of it.

Here is a fiddle to show the issue.

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?

2 Likes
2

You may try to replace createCanvas() w/ the windowResized() from this sketch link below: :link:

3

Replacing createCanvas with windowResized creates a lot more problems and doesn’t actually do anything to the scrollbar, unless I don’t understand what you mean.

4

I’ve made a new windowResized() version. And also made some changes to your code: :grinning:

<script async src=https://Unpkg.com/p5></script>
<div id=musicscape></div>

'use strict';

function setup() {
  _renderer.parent(musicscape);
  windowResized();
}

function draw() {
  fill(mouseIsPressed? 0 : 0xff).circle(mouseX, mouseY, 50);
}

function windowResized() {
  const css = getComputedStyle(canvas.parentElement),
        mw = float(css.marginLeft) + float(css.marginRight),
        mh = float(css.marginTop)  + float(css.marginBottom),
        ww = float(css.width)  || windowWidth,
        wh = float(css.height) || windowHeight,
        w = round(ww - mw), h = round(wh - mh);

  resizeCanvas(w, h, true);
}
1 Like
5

That works! Thank you @GoToLoop.

I’m still new to Processing so can you explain why this works and not setting the size directly in the setup method?

6

Actually, your original code works for me too. :flushed:

I had to lower #musicscape’s CSS height in order for the scroll not to show up even in my version. :face_with_hand_over_mouth:

1 Like
7

Actually you’re right @GoToLoop , it adds responsiveness which is great but it doesn’t fix my issue. I did fix it using an overflow: hidden on my body but I don’t really like that solution.

8

Canvas is an inline element, so it overflows because of line-spacing. I fixed it by setting #canvas to display: block.

1 Like
9
1 Like