12

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/

BenR
  • 2,641
  • 1
  • 22
  • 35
  • 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 Jul 02 '12 at 22:49

2 Answers2

23

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

canvas {
  display: block;
}
mudphone
  • 916
  • 9
  • 9
  • 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 Jul 04 '13 at 07:51
  • 2
    D'oh! I just realized that when the `` is `display: inline`, it has lineheight. – Dan Ross Jul 04 '13 at 07:54
0

This will fix it:

canvas {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
}
mudphone
  • 916
  • 9
  • 9
RhinoWalrus
  • 2,799
  • 2
  • 32
  • 37
  • 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 Jul 02 '12 at 22:36
  • http://stackoverflow.com/questions/4288253/html5-canvas-100-width-height-of-viewport. Less 'hacky'. :-) – RhinoWalrus Jul 02 '12 at 22:53