Установка высоты и ширины элемента canvas на window.innerHeight/innerWidth, вызывающего полосы прокрутки

Это очень прямолинейно, но я не могу понять, почему он вызывает полосы прокрутки. Вот код:

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);

Разве это не должно только заставлять холст охватывать ширину и высоту окна просмотра? Здесь пример JSFiddle: http://jsfiddle.net/TyJYH/

Ответ 1

Я решил эту же проблему, установив свойство отображения CSS тега canvas на "block".

canvas {
  display: block;
}

Ответ 2

Это исправит:

canvas {
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  top:0;
}