14

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/

Improve this question
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 2

Reset to default
26

I solved this same problem by setting the CSS display property of the canvas tag to "block."

canvas {
  display: block;
}
Improve this answer
2
  • 1
    THANK you, I read so many questions before I found this answer. The craziest solution I found was to position: fixed a transparent image to the bottom right corner of the window and use that to get measurements. That was accepted and upvoted!
    – Dan Ross
    Commented Jul 4, 2013 at 7:51
  • 3
    D'oh! I just realized that when the <canvas> is display: inline, it has lineheight.
    – Dan Ross
    Commented Jul 4, 2013 at 7:54
0

This will fix it:

canvas {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
}
Improve this answer
2
  • 1
    Thank you for your input. This is more of a 'hack' of sorts. My concern is more of why specifying an element to be the same height / width as the viewable window is causing a scroll bar even though I'm specifying all enabled elements to have zero margin, padding and borders.
    – BenR
    Commented Jul 2, 2012 at 22:36
  • stackoverflow.com/questions/4288253/…. Less 'hacky'. :-)
    – RhinoWalrus
    Commented Jul 2, 2012 at 22:53

Not the answer you're looking for? Browse other questions tagged or ask your own question.