CODEWITHSUNDEEP
javascriptjquerycanvas
Michael
Michael

Reputation:

Maximum width/height canvas scrollbar interference?

I'm trying to get a 100% width, height canvas element to draw on, but I'm hitting something of a catch 22 because both Chrome and Firefox create scrollbars. The scrollbars appear to be there because the other respective scrollbar makes the content wider/taller. That is, the vertical scrollbar is there because the bottom of the canvas is covered by the horizontal scrollbar and the horizontal scrollbar is there because the right of the canvas is covered by the vertical scrollbar. Any help is appreciated.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <script type="text/javascript" src="js/jquery.js"></script>
        <style>
            * { margin: 0; padding: 0; }
        </style>
        <script type="text/javascript">
            $(document).ready(function() {
                var canvas = $("canvas").get(0);
                canvas.width = $(document).width();
                canvas.height = $(document).height();
                var c = canvas.getContext("2d");
                c.fillStyle = "rgb(200,0,0)";
                c.fillRect(0,0,5000,50);
                c.fillStyle = "rgba(0,0,200,0.5)";
                c.fillRect(0,0,50,5000);
            });
        </script>
    </head>
    <body>
        <canvas></canvas>
    </body>
</html>

Upvotes: 3

Views: 4084

Answers (8)

cloakedninjas
cloakedninjas

Reputation: 4176

Late to the party... But answers saying set overflow: hidden aren't really the solution. That just hides the overflow... We don't want overflow in the first place.

As a minimum this is what's needed

body {
  margin: 0;
}

canvas {
  display: block;
}

And ideally the canvas dimensions are set via JS not with CSS:

canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

Upvotes: 2

Irfan Ahmad
Irfan Ahmad

Reputation: 49

<style>
    * {
        box-sizing: border-box;
    }

    html {
        width: 100vw;
        height: 100vh;
    }

    body {
        margin: 0;
        padding: 0;
        width: 100%;
        height: 100%;
        
    }
    canvas {
        /* border: 1px solid black; */
        background-color: red;
    }
</style>

Your CSS should look like this

Upvotes: 0

MadScientist
MadScientist

Reputation: 59

I had a similar problem, and someone (Dmitry Nevzorov) solved it. Try adding this bit of CSS:

canvas {
    box-sizing: border-box;
}

Upvotes: 0

dleavitt
dleavitt

Reputation: 1392

This did it for me (html5 doctype and normalize.css)

#container {
  line-height: 0px;
  overflow: hidden;
}

Upvotes: 2

Cristan
Cristan

Reputation: 14085

I'm afraid the canvas element really is the source of the problems:

Example:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<style>
html {
    height: 100%;
}

body{
    margin:0;
    height: 100%;
}
</style>
<body>

<!--
This does fit
<div style="width: 100%;height: 100%;background-color: gray" ></div>
-->

<!-- This doesn't -->
<canvas style="width: 100%;height: 100%;background-color: gray;" >

</body>
</html>

If you run it, you'll see a scrollbar. When you make the div visible instead (which has the same dimensions), no scrollbars will appear.

I don't know why this is happening (it is happening on Firefox and Chrome, but also IE9 and opera), but you can fix this by using the Transitional DOCTYPE:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

or you can fix it by making the canvas display:block;

While writing this I found this blog which basically says the same.

Upvotes: 1

dutchflyboy
dutchflyboy

Reputation: 641

Just in case somebody has the same problem and wants to stay in quirks mode, just add the following in the css:

* { margin: 0; padding: 0; overflow: hidden; }

Upvotes: 1

olliej
olliej

Reputation: 36783

You're probably being hit by the borders or margins on the body element -- you're asking for document.width/height (effectively) but putting it in an element with a border, so the total width of the page (canvas.width+(left/right borders)) is then bigger than the width/height you originally asked for.

Upvotes: 1

Jani Hartikainen
Jani Hartikainen

Reputation: 43243

Have you removed the padding/margin from <body>? By default, it comes with some padding and margin, so even if you have content that should fit "perfectly", there will be scrollbars because the padding and margin push the size.

Upvotes: 1

Related Questions