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" ".dtd">
<html xmlns="" 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>
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/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3/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>
- 1 Did you try to get the document.documentElement width and height instead of the window ? – Fabien Ménager Commented Jul 25, 2009 at 10:01
- Fabien Ménager, you should post that as an answer. – eyelidlessness Commented Jul 25, 2009 at 10:05
- Yes, I've also checked the dimensions on the canvas element and they are being set correctly (1440x717). – Michael Commented Jul 25, 2009 at 10:08
- @eyelidlessness Nope because my answer is a question ;) – Fabien Ménager Commented Jul 25, 2009 at 10:31
8 Answers
Reset to default 2This did it for me (html5 doctype and normalize.css)
#container {
line-height: 0px;
overflow: hidden;
}
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;
Have you removed the padding/margin from <body>? By default, it es 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.
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.
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; }
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/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/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.
I had a similar problem, and someone (Dmitry Nevzorov) solved it. Try adding this bit of CSS:
canvas {
box-sizing: border-box;
}
<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