JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="myCanvas" width="400" height="500"></canvas>

CSS

#myCanvas{

}

JavaScript

var c = document.getElementById("myCanvas");
var graphics = c.getContext("2d");

var Particle = function(xSet, ySet)
{
		this.XPos = xSet;
		this.YPos = ySet;
		this.Rotation = 0;
}

var particles = new Array();

for(var i = 0; i < 10; i++){
	particles.push(new Particle(Math.random()*c.width, Math.random()*c.height));
}

function draw()
{
		console.log(particles.length);
    graphics.fillStyle = 'black';
    graphics.fillRect(0, 0, screen.width, screen.height);
  //
	graphics.fillStyle = 'white';
	for(var i = 0; i < particles.length; i++)
	{
		//var particle = particles[i];
		particle.YPos += 1;
		
		// Draw image rotated
		graphics.save();
		graphics.translate(particle.XPos + 16 / 2, particle.YPos + 16 / 2);
		graphics.rotate( particle.Rotation );
		graphics.translate(-(particle.XPos + (16 / 2)), -(particle.YPos));
		graphics.rect(particle.XPos, particle.YPos, 16, 16);
    //graphics.fill();
		graphics.restore();
		if(particle.YPos > c.height)
		{
			particle.YPos = 0;
			particle.XPos = Math.random()*c.width;
		}
		
		particle.Rotation += 0.01;
	}
}

setInterval(draw, 3);