CODEWITHSUNDEEP
javascripthtmlhtml5-canvas
MadScientist
MadScientist

Reputation: 59

HTML5 Canvas Always Has Scrollbar

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

Upvotes: 2

Views: 2345

Answers (2)

Dmitry Nevzorov
Dmitry Nevzorov

Reputation: 615

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.

Upvotes: 2

Toby Okeke
Toby Okeke

Reputation: 654

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

Upvotes: 0

Related Questions