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>