HTML5 Canvas Always Has Scrollbar

Question

I have this canvas on my webpage, but whenever I load it, whichever way I resize the screen, it always ends up with a scrollbar for the horizontal and vertical axes. How can I fix this? My monitor does have a different aspect ratio, so does that affect it in any way? I can't really give any refernce code as the only time I even mention the width and height is the first time I set the values:

canvas.width = 1280;
canvas.height = 720;

Help would be really appreciated, I'm in a sort of crisis right now XD

EDIT: This is sort of irrelevant, but here's all my code on codepen

Wouldn't that just hide some of it? I want to see the whole thing, just in the right space. — MadScientist
– MadScientist, Commented May 20, 2018 at 19:27
Couls you provide the relevant html and css and js in a jsfiddle? That would make helping a lot easier — NielsNet
– NielsNet, Commented May 20, 2018 at 19:29
Make a codepen demo, its easier for us to help you that way. — DollarAkshay
– DollarAkshay, Commented May 20, 2018 at 19:30

Dmitry Nevzorov · Accepted Answer · 2018-05-20 19:54:48Z

2

Just add box-sizing:

canvas {
        box-sizing: border-box;
        border: 1px solid black;
        height: 100vh;
        width: 100vw;
}

The reason the scroll bars appear is that the canvas element uses the border that exceeds the window boundaries.

answered May 20, 2018 at 19:54

Dmitry Nevzorov

6259 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

MadScientist Over a year ago

Thank you so much, it fixed it. You're a lifesaver!!

Toby Okeke · Accepted Answer · 2018-05-20 19:30:51Z

0

Try the vh and vw property of css. Should use your screens vertical height as the default. Should help. Set them to 100.

answered May 20, 2018 at 19:30

Toby Okeke

6544 silver badges14 bronze badges

3 Comments

MadScientist Over a year ago

Nope, didn't work. Even if I set the window's height and width, it still has a little scrollbar.

Toby Okeke Over a year ago

Consider hiding the scroll bar with css then

MadScientist Over a year ago

That would leave some of the canvas out of the window, making it impossible to see, which is not what I want.

Collectives™ on Stack Overflow

HTML5 Canvas Always Has Scrollbar

2 Answers 2

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related