Путь холста Javascript не отображается

Question

Я новичок в canvas и пытаюсь создать маленькую игру.Я пытаюсь визуализировать некоторые фигуры на экране, но по какой-то причине фигуры не появляются.Методы вызываются и формы добавляются в массив, но на экране ничего не отображается.

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();
}

Любая предоставленная помощь очень ценится, спасибо!

Answer 1

Если у вас есть рабочая реализация randomNum, следующие строки приводят к тому, что координата y всегда отрицательна:

  const randomRad = randomNum(10, 100);
  const shape = new Shape(randomNum(randomRad, canvasWidth - randomRad), -randomRad, randomRad);

Таким образом, все фигуры выводятся за пределы экрана.