JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <title>Orbit Animation</title>
</head>
<body>
<canvas id="canvas">
Your browser does not support the HTML5 canvas tag.</canvas>
</body>
</html>

CSS

body{
  background: #060e26;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
}
canvas{
  background: url('https://i.pinimg.com/originals/5a/7c/5e/5a7c5ebd095763fa75695e23180b0c63.png');
  background-size: cover;
  image-rendering: pixelated;
  width: 100vh;
  height: 100vw;
  max-height: 100vh;
  max-width: 100vw;
}

JavaScript

class Vector{
	constructor(x, y){
  	this.x = x;
    this.y = y;
  }
}

class Planet{
	constructor(position, radius, color){
    this.position = position;
    this.color = color;
    this.radius = radius;
  }
  draw(ctx){
    fillCircle(this.position, this.radius, this.color);
  }
}

class OrbitingPlanet extends Planet{
	constructor(anchor, radius, orbitRadius, color, angleStep){
		super(new Vector(0, 0), radius, color);
  	this.anchor = anchor;

		this.orbitRadius = orbitRadius;
    this.angle = 0;
    this.angleStep = angleStep;
  }
  draw(ctx){
    
    this.angle += this.angleStep;
    
    this.position.x = this.anchor.x + Math.cos(this.angle) * this.orbitRadius;
    this.position.y = this.anchor.y + Math.sin(this.angle) * this.orbitRadius;
  
    //strokeCircle(this.anchor, this.orbitRadius, "white");
    fillCircle(this.position, this.radius, this.color);
  }
}

const canvas = document.getElementById("canvas");
canvas.width = 110; //make it look pixelated
canvas.height = canvas.width;

const ctx = canvas.getContext("2d");

const sunGradient = ctx.createRadialGradient(canvas.width/2, canvas.height/2, 0,canvas.width/2, canvas.height/2, canvas.height/11);
sunGradient.addColorStop(0, "yellow");
sunGradient.addColorStop(1, "#ffff55");

const earthGradient = ctx.createRadialGradient(canvas.width/2, canvas.height/2, canvas.height/3.7,canvas.width/2, canvas.height/2, canvas.height/2.7);
earthGradient.addColorStop(0, "lightblue");
earthGradient.addColorStop(0.5, "darkblue");
earthGradient.addColorStop(1, "#002");

const marsGradient = ctx.createRadialGradient(canvas.width/2, canvas.height/2, canvas.height/5.5,canvas.width/2, canvas.height/2, canvas.height/3.7);
marsGradient.addColorStop(0, "yellow");
marsGradient.addColorStop(0.5, "darkorange");
marsGradient.addColorStop(1, "#220");

const moonGradient = ctx.createRadialGradient(canvas.width/2, canvas.height/2, canvas.height/5.5,canvas.width/2, canvas.height/2, canvas.height/2.1);
moonGradient.addColorStop(0,...