This is extremely straight forward, yet I cannot figure out why it is causing scroll bars. Here is the code:
CSS
body, canvas, html{margin:0;padding:0;border:0 none;}
canvas{background:Black;}
HTML
<html>
<head></head>
<body></body>
</html>
JavaScript
var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.getElementsByTagName("body")[0].appendChild(canvas);
Shouldn't this only be causing the canvas to span the width and height of the viewable window? Here's a JSFiddle example: /
This is extremely straight forward, yet I cannot figure out why it is causing scroll bars. Here is the code:
CSS
body, canvas, html{margin:0;padding:0;border:0 none;}
canvas{background:Black;}
HTML
<html>
<head></head>
<body></body>
</html>
JavaScript
var canvas = document.createElement("canvas");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.getElementsByTagName("body")[0].appendChild(canvas);
Shouldn't this only be causing the canvas to span the width and height of the viewable window? Here's a JSFiddle example: http://jsfiddle.net/TyJYH/
Share Improve this question asked Jul 2, 2012 at 22:32 BenRBenR 2,9363 gold badges28 silver badges39 bronze badges 1- Could be the containing elements, body and html,are adding margin or padding surrounding the canvas. You could make the canvas position absolute or fixed., or set the margins and paddings explicitly to 0. – kennebec Commented Jul 2, 2012 at 22:49
2 Answers
Reset to default 26I solved this same problem by setting the CSS display property of the canvas tag to "block."
canvas {
display: block;
}
This will fix it:
canvas {
position:absolute;
left:0;
right:0;
bottom:0;
top:0;
}