Full Screen Canvas

Changed a little to see what it does better.

by Kai Carver

HTML

<div id="text">
  <p>
    The canvas is the yellow background color you see here. It will resize when you resize the browser, making it always fullscreen.
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
  <p>
    bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
  </p>
</div>
<canvas id="canvas"></canvas>

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 */


/* to show the canvas bounds */

canvas {
  background: #ff0;
}

#text {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  xwidth: 200px;
  background-color: rgba(255, 100, 255, 0.5);
}

JavaScript

(function() {
  var canvas = document.getElementById('canvas'),
    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
    var ctx = canvas.getContext("2d");
    ctx.fillStyle = "#FF0000";
    ctx.fillRect(100, 100, 150, 75);
    ctx.fillRect(300, 200, 75, 150);
  }
})();