Planet.js

const DEFAULT_HEALTH = 100,
  DEFAULT_WIDTH = 500,
  DEFAULT_HEIGHT = 500,
  DEFAULT_HIT_BOX_RADIUS = 270,
  DEFAULT_PLANET_COLOR = "#900c47",
  DEFAULT_PLANET_BORDER_COLOR = "#dafffe",
  DEFAULT_PLANET_BORDER_WIDTH = "20",
  DEFAULT_PLANET_TEXT_OFFSET = 20,
  DEFAULT_PLANET_TEXT_FONT = "32px ShareTech",
  DEFAULT_PLANET_TEXT_COLOR = "#FFF";

class Planet  {

  static draw(context) {
    context.save();
    // Draw planet
    context.fillStyle = this.color;
    context.strokeStyle = this.borderColor;
    context.lineWidth = this.borderWidth;
    context.beginPath();
    context.ellipse(this.x, this.y, this.width / 2, this.height / 2, Math.PI /
      4, 0, 2 * Math.PI);
    context.closePath();
    context.fill();
    context.stroke();
    // Draw current shield/health status
    context.beginPath();
    context.font = DEFAULT_PLANET_TEXT_FONT;
    context.fillStyle = DEFAULT_PLANET_TEXT_COLOR;
    context.textAlign = "center";
    context.fillText(`Shields at ${this.health}%`, this.x, this.y -
      DEFAULT_PLANET_TEXT_OFFSET);
    context.closePath();
    context.restore();
  }

}

export default Planet;