Menu
I'd like to create a web page which contains a canvas object which fills the screen without creating scroll bars.
Setting the canvas width and height to $(window).height() and $(window).width() results in scroll bars. Reducing the width by a few pixels is not reliable because the number I need to reduce by is different depending on the browser.
Is there a cross browser way to do this?
817
In Chrome, this works for me.
<html>
<head>
<title></title>
<script>
function init() {
var canvasBG = document.getElementById("test");
var ctxBG = canvasBG.getContext("2d");
canvasBG.style.width = window.innerWidth;
canvasBG.style.height = window.innerHeight;
};
window.onload = init;
</script>
</head>
<body>
<canvas id="test" style="background:#eeeeee;
margin:0; padding:0;
position:absolute;
top:0; left:0">
</canvas>
</body>
</html>
update: You might also want to attached a resize listener to the page so if the user resizes the page you can reset the width/height.
190
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
