Неверный размер холста при установке JavaScript [duplicate]

По умолчанию canvas, в отличие от div, есть display: inline;, поэтому он устанавливается в vertical-align: baseline;. Вы можете использовать любой из следующих подходов, чтобы естественным образом заполнить window.innerHeight:

#canvas {
    background-color: blue;
    vertical-align: top;
}

Или:

#canvas {
    background-color: blue;
    display: block;
}