The HTML file:

<html>
<head>
   <script src="stars.js" defer></script>
</head>
<body>
    <canvas id="sky" style="border:1px solid black;"></canvas>
    <button type="button" id="step"> Step</button>
</body>
</html>

stars.js

"use strict"

const STAR_COUNT = 50
const MAX_SIZE = 5
let starArray = []

// canvas stuff
const canvas = document.getElementById("sky")
const context = canvas.getContext("2d")
const height = canvas.height = 500
const width = canvas.width = 500

// button stuff
const StepButton = document.getElementById("step")

const colors = ["red", "green", "blue", "cyan", "magenta", "yellow"]

context.clearRect(0,0,width, height)

function RandomInt(max) {
    return Math.floor(Math.random() * max)
}

function RandomColor() {
    const size = colors.length
    return colors[RandomInt(size)]
}

function CreateStars() {
   if (starArray.length !== 0) {
       starArray = []
   }
 /* 
   let star = {x: RandomInt(width), 
               y: RandomInt(height),
               color : RandomColor(),
               size: RandomInt(MAX_SIZE)+1,
               growing : RandomInt(2) == 1}
*/
   
   for (let i = 0; i < STAR_COUNT; ++i) {
        let star = {x: RandomInt(width), 
               y: RandomInt(height),
               color : RandomColor(),
               size: RandomInt(MAX_SIZE)+1,
               growing : RandomInt(2) == 1}
                     
          starArray.push(star)
   }
}

function DisplayStars() {

    context.fillStyle = "black"
    context.fillRect(0,0,width, height)

    for (let star of starArray) {
       context.fillStyle = star.color
       context.fillRect(star.x, star.y, star.size, star.size)
    }
}

function ChangeStars() {
    let change

    // switch directions if needed
    for (let i in starArray) {
       if ((starArray[i].size <= 0 && !starArray[i].growing) 
              || (starArray[i].size >= MAX_SIZE && starArray[i].growing)) {
           starArray[i].growing = !starArray[i].growing 
       }

       if (starArray[i].growing ) {
           change = 1
       } else {
           change = -1
       }

       starArray[i].size += change
    }
}

function Step() {
    ChangeStars()
    DisplayStars()
}

CreateStars()
DisplayStars()
StepButton.addEventListener("click", Step)