JS - Creando el espacio en tu sitio web

 Espacio estelar en tu sitio web con Javascript

Código para no perder la línea--

Espero poder poner contenido dentro del espacio, que hasta ahorita no he podido.

-------------------------HTML5

<canvas id="canvas"></canvas>

-------------------------CSS3

#canvas{

    width: 100%;

    height: 150px;

    background: black;

}

-------------------------CSS3

// Canva espacial black and estrellas

  const canvas = document.getElementById('canvas');

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

  canvas.width = window.innerWidth;

  canvas.height = window.innerHeight;

  // Crear lista de estrellas

  const numEstrellas = 200;

  const estrellas = [];

  for (let i = 0; i < numEstrellas; i++) {

    estrellas.push({

      x: Math.random() * canvas.width,

      y: Math.random() * canvas.height,

      tam: Math.random() * 5,

      vel: Math.random() * 1.5 + 3.5 // Velocidad de movimiento

    });

  }

  function animar() {

    // Limpiar pantalla

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = 'white';

    // Actualizar y dibujar cada estrella

    estrellas.forEach(e => {

      e.x += e.vel; // Mover a la derecha

      // Si pasa el borde derecho, regresar a la izquierda (infinito)

      if (e.x > canvas.width) {

        e.x = 10;

        e.y = Math.random() * canvas.height; // Nueva posición vertical opcional

      }

      // Dibujar estrella

      ctx.fillRect(e.x, e.y, e.tam, e.tam);

    });

    requestAnimationFrame(animar);

  }

  animar(); Si logras poner contenido dentro del espacio, hay que compartir el como...