[解決済み] HTML5 Canvas 100% Width Height of Viewport?

質問

ビューポートの幅と高さを100％占有するcanvas要素を作成しようとしています。

私の例で見ることができる ここで が発生するのですが、ChromeでもFireFoxでもスクロールバーが追加されています。 どうすれば、余分なスクロールバーを防いで、ウィンドウの幅と高さをキャンバスのサイズに正確に指定できるでしょうか？

解決方法を教えてください。

ブラウザのサイズを変更してもキャンバスの幅と高さを常にフルスクリーンにするためには、描画ループを関数内で実行し、キャンバスの大きさを window.innerHeight と window.innerWidth .

例 http://jsfiddle.net/jaredwilli/qFuDr/

HTML

<canvas id="canvas"></canvas>

JavaScript

(function() {
  const canvas = document.getElementById('canvas');
  const context = canvas.getContext('2d');

  // resize the canvas to fill browser window dynamically
  window.addEventListener('resize', resizeCanvas, false);
        
  function resizeCanvas() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
                
    /**
     * Your drawings need to be inside this function otherwise they will be reset when 
     * you resize the browser window and the canvas goes will be cleared.
     */
    drawStuff(); 
  }
  
  resizeCanvas();
        
  function drawStuff() {
    // do your drawing stuff here
  }
})();

CSS

* { margin:0; padding:0; } /* to remove the top and left whitespace */

html, body { width:100%; height:100%; } /* just to be sure these are full screen*/

canvas { display:block; } /* To remove the scrollbars */

これが、キャンバスをブラウザの幅と高さいっぱいに正しく表示させる方法です。キャンバスに描画するためのコードをすべて drawStuff() 関数を使用します。