Instead of
<pre>
<canvas id="theCanvas" width="500" height="500"></canvas>
</pre>
where I specify the size of the canvas is there a way to make the canvas take up the entire browser window?
views:
332answers:
3
+3
A:
<html>
<body style="height: 100%; margin: 0;">
<canvas style="width: 100%; height: 100%;"></canvas>
</body>
</html>
Squeegy
2009-02-05 21:19:26
A:
In CSS, set width and height to 100% for html, body (and form if asp.net) tags.
Does not work in older IEs, though.
devio
2009-02-05 21:19:26
+1
A:
When you are creating a canvas element that spans the entire screen, you are probably going to want to monitor for window resizing events. You can go ahead and use a percentage based style, but you will have to remember to repaint your canvas whenever the window is resized; when a canvas element's dimensions are altered (width or height) the canvas itself is cleared and effectively reset (origin policies are an exception).
I suggest you use something like this:
window.addEventListener('resize', function() { canvas.width = window.innerWidth; canvas.height = window.innerHeight; MyRepaintCallback(); }, false);
There are several considerations for your repaint function beyond the scope of this question. At least, rest assured, knowing that double buffering will likely keep your canvas from flickering between repainting calls.
Charles Pritchard
2009-10-03 20:30:49