Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Setting height & width of canvas element to window.innerHeight/innerWidth causing scrollbars

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/

like image 641
BenR Avatar asked Jul 02 '12 22:07

BenR


1 Answers

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

canvas {
  display: block;
}
like image 85
mudphone Avatar answered Oct 28 '22 14:10

mudphone