lets make some solar system simulalation by html,css,javascript. there should be some astrophysical data already known, on which we can construct simuli. now need to get local time and align all positions accordingly. 
“you would need to gather current ephemeris data and compute each planet’s position in its elliptical orbit, which is beyond the scope of a simple Canvas simulation.”. why “beyond the scope of a simple Canvas simulation”? can you do relatively simple math model algorithm in all terms that will function as intended? output fully implemented functioning code.: 
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Solar System Simulation with Labels</title>
    <style>
        canvas {
            display: block;
            background: black;
            width: 100%;
            height: 100vh;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<canvas id="canvas"></canvas>
<script>
    const canvas = document.getElementById("canvas");
    const ctx = canvas.getContext("2d");
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;

    // Scaled down values for distances and sizes for demonstration purposes
    const planets = [
        // Adjusted size and distance for visualization
        { name: 'Mercury', radius: 50, angle: 0, size: 1.5, color: 'darkgray' },
        { name: 'Venus', radius: 90, angle: 0, size: 2.5, color: 'yellow' },
        { name: 'Earth', radius: 120, angle: 0, size: 2.5, color: 'blue' },
        { name: 'Mars', radius: 140, angle: 0, size: 2, color: 'red' },
        { name: 'Jupiter', radius: 180, angle: 0, size: 10, color: 'orange' },
        { name: 'Saturn', radius: 250, angle: 0, size: 8, color: 'khaki' },
        { name: 'Uranus', radius: 330, angle: 0, size: 5, color: 'lightblue' },
        { name: 'Neptune', radius: 380, angle: 0, size: 5, color: 'darkblue' },
        // The Sun, not to scale, for visibility
        { name: 'Sun', radius: 0, angle: 0, size: 20, color: 'yellow' }
    ];
    const center = { x: canvas.width / 2, y: canvas.height / 2 };
    let angleX = 0;
    let angleY = 0;
    let dragStart = null;

    function rotate(point, angleX, angleY) {
        let cosX = Math.cos(angleX);
        let sinX = Math.sin(angleX);
        let cosY = Math.cos(angleY);
        let sinY = Math.sin(angleY);

        let x1 = point.x;
        let y1 = cosX * point.y - sinX * point.z;
        let z1 = sinX * point.y + cosX * point.z;

        return {
            x: cosY * x1 - sinY * z1,
            y: y1,
            z: sinY * x1 + cosY * z1
        };
    }

    function project(point) {
        const zoom = 600;
        const perspective = zoom / (zoom + point.z);
        return {
            x: point.x * perspective + center.x,
            y: point.y * perspective + center.y
        };
    }

    function drawOrbit(radius) {
        ctx.beginPath();
        let firstPoint = true;
        for (let angle = 0; angle < Math.PI * 2; angle += 0.01) {
            let point = rotate({ x: radius * Math.cos(angle), y: 0, z: radius * Math.sin(angle) }, angleX, angleY);
            let projected = project(point);
            if (firstPoint) {
                ctx.moveTo(projected.x, projected.y);
                firstPoint = false;
            } else {
                ctx.lineTo(projected.x, projected.y);
            }
        }
        ctx.closePath();
        ctx.strokeStyle = "rgba(255, 255, 255, 0.3)";
        ctx.stroke();
    }

    function drawPlanet(planet) {
        let point = rotate({ x: planet.radius * Math.cos(planet.angle), y: 0, z: planet.radius * Math.sin(planet.angle) }, angleX, angleY);
        let projected = project(point);
        ctx.beginPath();
        ctx.arc(projected.x, projected.y, planet.size, 0, Math.PI * 2);
        ctx.fillStyle = planet.color;
        ctx.fill();
        ctx.closePath();

        // Draw the planet's name if it's the Sun or if the perspective scale is enough
        if (planet.name === 'Sun' || perspectiveScale(point.z) > 0.1) {
            ctx.fillStyle = 'white';
            ctx.font = `bold ${Math.max(projected.scale * 15, 12)}px sans-serif`; //need to be converted in normal templateliteral without backticks
            ctx.fillText(planet.name, projected.x + planet.size + 5, projected.y + 5);
        }
    }

    function perspectiveScale(z) {
        const zoom = 600;
        return zoom / (zoom + z);
    }

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);

        // Draw the Sun
        drawPlanet(planets[planets.length - 1]);

        // Draw orbits and planet
        for (let i = 0; i < planets.length - 1; i++) {
            let planet = planets[i];
            drawOrbit(planet.radius);

            planet.angle += (Math.PI / 180) * (1 / planet.radius); // simplistic speed proportional to orbit size
            drawPlanet(planet);
        }

        requestAnimationFrame(draw); 
    }

    canvas.addEventListener('mousedown', (event) => {
        dragStart = { x: event.clientX, y: event.clientY };
    });

    canvas.addEventListener('mousemove', (event) => {
        if (dragStart) {
            const dx = event.clientX - dragStart.x;
            const dy = event.clientY - dragStart.y;
            angleY += dx * 0.005;
            angleX += dy * 0.005;
            dragStart = { x: event.clientX, y: event.clientY };
        }
    });

    canvas.addEventListener('mouseup', () => {
        dragStart = null;
    });

    canvas.addEventListener('mouseleave', () => {
        dragStart = null;
    });

    draw(); // Start the simulation
</script>
</body>
</html>