title: Javascript canvas path not rendering
body: <p>I'm new to canvas and I'm trying to create a small game.  I'm trying to render some shapes on the screen but for some reason the shapes don't appear. The methods are being called and shapes get added to the array but nothing renders on the screen.</p>
  
  <pre><code>const canvas = document.getElementsByClassName('gameContainer');
  const context = canvas[0].getContext('2d');
  let canvasWidth = window.innerWidth;
  let canvasHeight = window.innerHeight;
  
  let shapes = [];
  
  class Shape {
    constructor(x, y, rad) {
      this.x = x;
      this.y = y;
      this.rad = rad;
    }
    createShape() {
      context.beginPath();
      context.arc(this.x, this.y, this.rad, 0, 2 * Math.PI, false);
      context.fillStyle = '#000';
      context.fill();
    }
  }
  
  class CanvasState {
    constructor() {
      this.canvas = canvas[0];
      this.canvas.height = canvasHeight;
      this.canvas.width = canvasWidth;
      this.shapes = shapes;
    }
    addShape() {
      setInterval(function() {
        const randomRad = randomNum(10, 100);
        const shape = new Shape(randomNum(randomRad, canvasWidth - randomRad), -randomRad, randomRad);
        shape.createShape(this.context);
        shapes.push(shape);
      }, 1000);
    }
  }
  
  function randomNum(min, max) {
    Math.round(Math.random() * (max - min) + min);
  }
  
  function init() {
    const cvs = new CanvasState();
    cvs.addShape();
  }
  
  window.onload = function() {
    init();
  }
  </code></pre>
  
  <p>Any help given is greatly appreciated, thanks!</p>