Menu
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>
This did it for me (html5 doctype and normalize.css)
#container {
line-height: 0px;
overflow: hidden;
}
84
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;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
