I must've killed over an hour on what seems to me like strange behaviour that happens in Firefox, Safari and Chrome. Here is some code:
<!doctype html>
<html>
<head>
<title>Watch me grow scrollbars!</title>
</head>
<body onload="resizeCanvas()">
<canvas id="canvas"></canvas>
</body>
</html>
<script type="application/javascript">
function resizeCanvas() {
var canvas = document.getElementById("canvas");
canvas.setAttribute("height", window.innerHeight);
canvas.setAttribute("width", window.innerWidth);
}
</script>
Basically, the canvas always seems to maximize 'too much', and the window grows scrollbars on both sides. I've tried using various ways of obtaining the document dimensions, including nesting canvas in a 100% wide & tall absolutely positioned div, as well as extracting the document.documentElement.clientWidth/Height properties.
Just to be sure I'm not going insane, I've placed an image in place of the canvas, and voila, the same code worked perfectly to stretch the image out to document dimensions.
What am I doing wrong here? I'm too tired to understand. Must.. drink.. something.