リサイズブラウザウィンドウの塗りつぶしキャンバス動的

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>