Edit in JSFiddle

<canvas id="c" class="abs center"></canvas>



<script>(function () {
  Math.randomInt = function (min, max) {
    return Math.floor(Math.random() * (max - min)) + min;
  };
  Math.randomDec = function (min, max, decimals) {
    return (Math.random() * (max - min) + min).toFixed(decimals || 2);
  };
  Math.randomList = function (list) {
    return list[Math.randomInt(0, list.length)];
  };
})();</script>

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: dimgray;
}

canvas {
  background: #f9f9f9;
}

div.overlay {
  width: 100%;
  opacity: .75;
  
  h1 {
    margin: 0;
    display: block;
    color: rgb(51, 51, 51);
    font-size: 10vw;
    font-family: 'Open Sans';
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
  }
}


/* Utility */

.abs {position: absolute;}
.left {left: 5px};
.right {right: 5px;}
.bottom {bottom: 5px;}
.top {top: 5px;}
.hcenter {left: 50%; transform: translateX(-50%);}
.vcenter {top: 50%; transform: translateY(-50%);}
.center {top: 50%; left: 50%; transform: translate(-50%, -50%);}
.overlay {z-index: 999;}
.hidden {display: none};