JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<style>
body{ margin:0px;padding:0px;}
#canvas{height:100%; width:100%}
</style>
</head>
<body>
    <div id="container">
        <canvas id="canvas" height="600" width="600"></canvas>
    </div>
	<script>
	var canvas;
var ctx;
var starNum = 100;
var starArray = [];

init();

function init() {
    canvas = document.getElementById("canvas");
    ctx = canvas.getContext("2d");

    generateStars();
    drawCanvas();
}

function generateStars() {
    for (i = 0; i < starNum; i++) {
        thisStar = {
            x: Math.floor(Math.random() * canvas.width),
            y: Math.floor(Math.random() * canvas.height),
            v: Math.ceil(Math.random() * 10),
            sc: Math.random(),
            size: Math.random()
        };
        starArray.push(thisStar);
    }
}

function drawCanvas() {
    window.requestAnimationFrame(drawCanvas);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = "black";
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    for (var i in starArray) {
        var star = starArray[i];
        var sColor;
        var sSize = star.size * 1.5;
       
        star.y = star.y + star.v;
        if (star.y > canvas.height) {
            star.y = 1;
            star.x = Math.floor(Math.random() * canvas.width);
            star.v = Math.ceil(Math.random() * 5);
        }
        if (star.sc <= 0.33) sColor = "lightblue";
        if (star.sc > 0.33 && star.sc <= 0.66) sColor = "yellow";
        if (star.sc > 0.66) sColor = "orange";
        
        ctx.fillStyle = sColor;
        ctx.beginPath();
        ctx.arc(star.x, star.y, sSize, 0, Math.PI * 2, false);
        ctx.closePath();
        ctx.fill();
    }
}
	</script>
</body>
</html>