JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="640" height="480">
            This text is displayed if your browser does not support HTML5 Canvas.
        </canvas>

CSS

canvas {
    border: 1px dotted black;
}

JavaScript

var ctx
var width, height
var depth = 3

var stars

var ticker = 0

var depth2color = [[255,255,255],	// depth 0, brightest
				[128,128,128],	// depth 1, medium
				[96,96,96]]		// depth 2, dim

var depth2speed = [8,4,2]

/*	INPUT:	n
	OUTPUT:	[0,n-1]	*/
function randRange(n)
{
	return Math.floor(Math.random()*n)
}

function randomSpot()
{
	x = randRange(width)
	y = randRange(height)
	z = randRange(depth)
	return [x,y,z]
}

/* INPUT:
	data	Uint8ClampedArray
	x,y		coordinates
	rgb		3-array with r,g,b values
*/
function setPixelRgb(data, x, y, rgb)
{
	var idx = 4*(y*width + x)
	data[idx] = rgb[0]
	data[idx+1] = rgb[1]
	data[idx+2] = rgb[2]
	data[idx+3] = 0xFF
}

function update()
{
	/* ImageData object */
	var imgdata = ctx.getImageData(0, 0, width, height)
	/* Uint8ClampedArray */
	var data = imgdata.data;

	for(var i=0; i<stars.length; ++i) {
		[x,y,z] = stars[i]

		/* erase old star */
		setPixelRgb(data, x, y, [0,0,0])

		/* new position */
		//console.log('ticker:' + ticker + ' and sin:' + Math.sin((ticker/100)*2*Math.PI))
		x = x + Math.round(depth2speed[z] * Math.sin((ticker/1000)*2*Math.PI))
		y = y + Math.round(depth2speed[z] * Math.sin((ticker/700)*2*Math.PI))
		//x = Math.round(x + (depth2speed[z] * -.5125))
		if(x < 0) {
			[x,y,z] = randomSpot()
			x = width-1
		} else if(x >= width) {
			[x,y,z] = randomSpot()
			x = 0
		} else if(y < 0) {
			[x,y,z] = randomSpot()
			y = height-1
		} else if(y >= height) {
			[x,y,z] = randomSpot()
			y = 0
		}

		stars[i] = [x,y,z]
	
		/* draw it */
		setPixelRgb(data, x, y, depth2color[z])
	}

	ticker++;

	ctx.putImageData(imgdata, 0, 0)
}

function main()
{
	var canvas = document.getElementById("canvas");
	
	/*	"2d"				returns CanvasRenderingContext2D
		"webgl" 			returns WebGLRenderingContext
		"webgl2"			returns WebGL2RenderingContext
		"bitmaprenderer"	returns ImageBitmapRenderingContext	*/
	ctx = canvas.getContext("2d", {alpha: false});

	width = canvas.width
	height = canvas.height

	stars = new...