Creating stars using JavaScript

I previously made a starry background using canvas. But we don't need to use canvas at all. Since a lot of the canvas manipulation involves JavaScript, it shouldn't be too hard to change it to only use JavaScript (and some CSS).

HTML and CSS

The body will be our sky that we add the stars to, so at least in CodePen we don't need to add any HTML.

But we do need some CSS to make sure the sky fills the screen with black.

html,
body {
  height: 100%;  
}

body {
  overflow: hidden;
  background-color: black;
}

With that done, everything else will be written in JavaScript.

Random helper function

We're going to randomly place the stars, with a random size and random opacity. So I'm using the same randomisation function that I used with canvas. It allows us to specify a random number between min and max inclusive. Whereas Math.random gives you a random number between 0 (inclusive) and 1 (exclusive).

function random(min, max) {
  return min + Math.random() * (max + 1 - min);
}

Set up background

This is all the same as the canvas. So we'll work out how many pixels we have in total on the body and then decide what fraction of those should contain stars.

const body = document.querySelector('body');
const canvasSize = body.offsetWidth * body.offsetHeight;
const starsFraction = canvasSize / 2000;

Loop through each star

We're going to add each star one at a time. For each star, we'll set up the properties we need.

for(let i = 0; i < starsFraction; i++) {
  // Set up random elements
  let xPos = random(0, 100);
  let yPos = random(0, 100);
  let alpha = random(0.5, 1);
  let size = random(1, 2);
  let colour = '#ffffff';
}

The xPos and yPos here will be percentages, hence needing a random number between 0 and 100.

Alpha is the opacity, which won't go below 0.5 because that will make it hard to see.

The size is between 1px and 2px, as anything smaller will be hard to see and anything bigger won't look as much like a star.

And then they will all be white.

Add each star

Within the loop, we add each star to the body. Then use the properties we set to add the styling.

  // Add them to the body
  const star = document.createElement('div');
  star.style.position = 'relative';
  star.style.left = xPos + '%';
  star.style.top = yPos + '%';
  star.style.opacity = alpha;
  star.style.width = size + 'px';
  star.style.height = size + 'px';
  star.style.backgroundColor = colour;
  document.body.appendChild(star);
}

Adding elements using JavaScript is a bit unintuitive, I find. First of all we tell it we want to add a div and we're going to call it a star. This isn't the class or the id, it's just the name we're giving it in JavaScript.

Then we set all the style elements from earlier. With the addition of a position relative so the top and left have meaning.

And then we append our star to the body.

And that's it! Because the top and left are percentages, it will scale up or down.

For some reason it doesn't add stars to the top left, but then in reality stars clump into constellations and bits of the sky have more stars than others.

Final code

Here's the final code in CodePen: