looks no errors but canvas is black. : 
<!DOCTYPE html>
<html>
<head>
<title>Solar System</title>
<style>
canvas {
background: black;
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<canvas id="canvas" width="600" height="600"></canvas>
<script>
var ctx = document.getElementById("canvas").getContext("2d");

var sun = {
x: 300,
y: 300,
radius: 50,
color: "yellow"
};

var planets = [
{
name: "Mercury",
distance: 70,
radius: 5,
color: "gray",
inclination: 0,
eccentricity: 0.01,
angle: Math.random() * Math.PI * 2,
satellites: []
},
{
name: "Venus",
distance: 100,
radius: 10,
color: "orange",
inclination: Math.PI / 4,
eccentricity: 0.02,
angle: Math.random() * Math.PI * 2,
satellites: []
},
{
name: "Earth",
distance: 150,
radius: 12,
color: "blue",
inclination: Math.PI / 8,
eccentricity: 0.03,
angle: Math.random() * Math.PI * 2,
satellites: [
{
name: "Moon",
distance: 40,
radius: 3,
color: "gray",
inclination: Math.PI / 16,
eccentricity: 0.02,
angle: Math.random() * Math.PI * 2
}
]
},
{
name: "Mars",
distance: 200,
radius: 8,
color: "red",
inclination: Math.PI / 16,
eccentricity: 0.04,
angle: Math.random() * Math.PI * 2,
satellites: [
{
name: "Phobos",
distance: 20,
radius: 2,
color: "gray",
inclination: Math.PI / 32,
eccentricity: 0.02,
angle: Math.random() * Math.PI * 2
},
{
name: "Deimos",
distance: 30,
radius: 3,
color: "gray",
inclination: Math.PI / 64,
eccentricity: 0.03,
angle: Math.random() * Math.PI * 2
}
]
}
];

function drawPlanet(planet) {
var directionX = Math.cos(planet.angle);
var directionY = Math.sin(planet.angle) * Math.sin(planet.inclination);
var planetX = sun.x + planet.distance * directionX;
var planetY = sun.y + planet.distance * directionY;
if (planetX + planet.radius < 0 || planetX - planet.radius > 600 ||
planetY + planet.radius < 0 || planetY - planet.radius > 600) return;

if (planetX > sun.x) {
var planetTop = planetY - planet.radius * Math.sin(Math.acos((sun.x - planetX) / planet.distance));
var planetBottom = planetY + planet.radius * Math.sin(Math.acos((sun.x - planetX) / planet.distance));
ctx.beginPath();
ctx.moveTo(sun.x, sun.y);
ctx.lineTo(planetX, planetTop);
ctx.lineTo(planetX, planetBottom);
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();

if (planet.satellites && planet.satellites.length > 0) {
planet.satellites.forEach(function(satellite) {
var satelliteDirectionX = Math.cos(satellite.angle);
var satelliteDirectionY = Math.sin(satellite.angle) * Math.sin(satellite.inclination);

var satelliteX = planetX + satellite.distance * satelliteDirectionX;
var satelliteY = planetY + satellite.distance * satelliteDirectionY;
if (satelliteX + satellite.radius < 0 || satelliteX - satellite.radius > 600 ||
satelliteY + satellite.radius < 0 || satelliteY - satellite.radius > 600) return;

var satelliteTop = satelliteY - satellite.radius * Math.sin(Math.acos((planetX - satelliteX) / satellite.distance));
var satelliteBottom = satelliteY + satellite.radius * Math.sin(Math.acos((planetX - satelliteX) / satellite.distance));
ctx.beginPath();
ctx.moveTo(planetX, planetY);
ctx.lineTo(satelliteX, satelliteTop);
ctx.lineTo(satelliteX, satelliteBottom);
ctx.closePath();
ctx.fillStyle = "black";
ctx.fill();
});
}

ctx.beginPath();
ctx.arc(planetX, planetY, planet.radius, 0, 2 * Math.PI);
ctx.fillStyle = planet.color;
ctx.fill();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(sun.x, sun.y);
ctx.lineTo(sun.x + planet.distance, sun.y);
ctx.strokeStyle = "white";
ctx.stroke();
ctx.closePath();

ctx.beginPath();
ctx.moveTo(sun.x, sun.y);
ctx.lineTo(planetX, planetY);
ctx.strokeStyle = "white";
ctx.stroke();
ctx.closePath();

var angleProjected = Math.asin(directionY / Math.sqrt(directionX ** 2 + directionY ** 2));
  if (directionX < 0) angleProjected = Math.PI - angleProjected;
var textX = sun.x + (planet.distance / 2) * Math.cos(angleProjected);
var textY = sun.y + (planet.distance / 2) * Math.sin(angleProjected);
var text = planet.name + ", dist: " + planet.distance + "km";
ctx.font = "14px Arial";
ctx.fillStyle = "white";
ctx.fillText(text, textX, textY);

planet.satellites.forEach(function(satellite) {
drawPlanet(satellite);
});
}

function animate() {
ctx.clearRect(0, 0, 600, 600);
ctx.beginPath();
ctx.arc(sun.x, sun.y, sun.radius, 0, 2 * Math.PI);
ctx.fillStyle = sun.color;
ctx.fill();
ctx.closePath();

planets.forEach(function(planet) {
planet.angle += 0.01;
drawPlanet(planet);
});

requestAnimationFrame(animate);
}

animate();}
</script>
</body>
</html>