# Unwanted scrollbar showing because of canvas
**URL:** https://discourse.processing.org/t/unwanted-scrollbar-showing-because-of-canvas/12214
**Category:** Coding Questions
**Created:** [June 20, 2019, 6:11pm UTC](https://discourse.processing.org/t/unwanted-scrollbar-showing-because-of-canvas/12214 "2019-06-20T18:11:25Z")
**Posts on this page:** 9
**Page:** 1
### Author:  [@Halhex](https://discourse.processing.org/u/Halhex)
#### Post date: [June 20, 2019, 6:11pm UTC](https://discourse.processing.org/t/unwanted-scrollbar-showing-because-of-canvas/12214/1 "2019-06-20T18:11:25Z")
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](https://jsfiddle.net/5y9qhmos/1/).
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?**
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [June 20, 2019, 8:07pm UTC](https://discourse.processing.org/t/unwanted-scrollbar-showing-because-of-canvas/12214/2 "2019-06-20T20:07:43Z")
> [@Halhex](#):
>
> How can I get rid of the vertical scrollbar while keeping the canvas to the size of its parent?
You may try to replace **createCanvas()** w/ the **windowResized()** from this sketch link below: 🔗
- [can I save the state that the canvas is in, and the call that state later? - Processing 2.x and 3.x Forum](http://Forum.Processing.org/two/discussion/23114/can-i-save-the-state-that-the-canvas-is-in-and-the-call-that-state-later#Item_4)
- [ThimbleProjects.org/gotoloop/288988/](http://ThimbleProjects.org/gotoloop/288988/)
---
### Author:  [@Halhex](https://discourse.processing.org/u/Halhex)
#### Post date: [June 21, 2019, 12:55pm UTC](https://discourse.processing.org/t/unwanted-scrollbar-showing-because-of-canvas/12214/3 "2019-06-21T12:55:46Z")
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.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [June 21, 2019, 2:03pm UTC](https://discourse.processing.org/t/unwanted-scrollbar-showing-because-of-canvas/12214/4 "2019-06-21T14:03:08Z")
I’ve made a new **windowResized()** version. And also made some changes to your code: 😀
```auto
```
```javascript
'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);
}
```
---
### Author:  [@Halhex](https://discourse.processing.org/u/Halhex)
#### Post date: [June 21, 2019, 2:52pm UTC](https://discourse.processing.org/t/unwanted-scrollbar-showing-because-of-canvas/12214/5 "2019-06-21T14:52:15Z")
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?
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [June 21, 2019, 3:05pm UTC](https://discourse.processing.org/t/unwanted-scrollbar-showing-because-of-canvas/12214/6 "2019-06-21T15:05:25Z")
Actually, your original code works for me too. 😳
I had to lower _#musicscape_’s CSS _height_ in order for the scroll not to show up even in my version. 🤭
---
### Author:  [@Halhex](https://discourse.processing.org/u/Halhex)
#### Post date: [June 21, 2019, 7:06pm UTC](https://discourse.processing.org/t/unwanted-scrollbar-showing-because-of-canvas/12214/7 "2019-06-21T19:06:33Z")
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.
---
### Author:  [@Halhex](https://discourse.processing.org/u/Halhex)
#### Post date: [June 25, 2019, 1:29pm UTC](https://discourse.processing.org/t/unwanted-scrollbar-showing-because-of-canvas/12214/8 "2019-06-25T13:29:13Z")
Canvas is an `inline` element, so it overflows because of line-spacing. I fixed it by setting `#canvas` to `display: block`.
---
### Author:  [@GoToLoop](https://discourse.processing.org/u/GoToLoop)
#### Post date: [June 28, 2019, 5:51pm UTC](https://discourse.processing.org/t/unwanted-scrollbar-showing-because-of-canvas/12214/9 "2019-06-28T17:51:27Z")
>