Resize заливка окно браузера холст динамически

Question

При изменении размера окна не собирается заполнить холст с градиентом ...

window.addEventListener('resize', resizeCanvas, false); 
function resizeCanvas() { 

      canvas.width = window.innerWidth; 
       canvas.height = window.innerHeight; 
      draw(); 

    } 
    resizeCanvas(); 

http://codepen.io/tworog/pen/jVoYrz

Пожалуйста, помогите.

Answer 1

Размер холста уже обновляется.

Чтобы избавиться от градиента, вам необходимо изменить строку 48, чтобы размер прямоугольника соответствовал холсту.

ctx.fillRect(0,0,canvas.width,canvas.height); 

Answer 2

Для этого вам не нужен javascript, вы можете просто использовать css. (Я сделал холст синий в следующем примере, чтобы доказать, что это заполняет весь лист)

canvas { 
 
    background: cornflowerblue; 
 
} 
 

 
html, body, canvas { 
 
    padding: 0; 
 
    margin: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
}

<canvas></canvas>