Canvas maximization bug?
Posted
by mitjak
on Stack Overflow
See other posts from Stack Overflow
or by mitjak
Published on 2010-05-04T01:19:54Z
Indexed on
2010/05/04
5:28 UTC
Read the original article
Hit count: 219
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.
© Stack Overflow or respective owner
