JSFiddle - React, Tailwind, and code Playground

by frogggeee McFrogggeee

HTML

<!DOCTYPE html>
<html>
<head>
<body>
<h1>moving squares</h1>
<p>by frogggeee</p>
<canvas id = "canvas" width = "480" height = "360"></canvas>
<script>
let canvas = document.getElementById("canvas");
let ctx = canvas.getContext("2d");
let squarex = [];
let squarey = [];
let squaresize = [];
let thing = 0;
for (let i = 0;i < 100;i++) {
	squarex.push(Math.floor((Math.random()) * 480) + 1);
  squarey.push(Math.floor((Math.random()) * 360) + 1);
  squaresize.push(Math.floor((Math.random()) * 10) + 5);
}
function square(x, y, size) {
	ctx.beginPath();
  ctx.rect(x, y, size, size);
  ctx.fillStyle = "#FF0000";
  ctx.fill();
  ctx.closePath();
}
function rendersquares() {
thing = 0;
let mx = 1;
let my = 1;
	for (let i = 0;i < 4;i++) {
  	square(squarex[thing] + mx, squarey[thing] + my, squaresize[thing]);
  	thing++;
  }
}
setInterval(rendersquares, 10);
</script>
</body>
</head>
</html>