JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width="800" height="600"></canvas>

CSS

canvas {
  				border:1px solid black;
			}

JavaScript

var crc2;

var x = 400;
var y= 300;
var dx = 20;
var color = "hsl(" + Math.random() * 360 + ", 100%, 50%)";


    let canvas = document.querySelector("canvas");
    console.log(canvas);
    
    crc2 = canvas.getContext("2d");
    console.log(crc2);
    
  // ImageData des Camvas in imgData abspeichern
    imgData = crc2.getImageData(0, 0, 800, 600);
    
  // Animierte Elemente
    animate();



function animate() {
    console.log("Timeout");
    crc2.putImageData(imgData, 0, 0);
    
    x += dx;
    drawCirc(x, y, color);
    
    if(x > 850 || y > 650){
    	x =-50;
    	y = Math.random()* 550 + 50;
    	color = "hsl(" + Math.random() * 360 + ", 100%, 50%)";
    }
    
    //Alle Xms 
    window.setTimeout(animate, 30);
}

function drawCirc(_x, _y, _color){
	  /*circle*/
	  crc2.beginPath();
	  crc2.arc(_x, _y, 50, 0, Math.PI * 2);
	  crc2.fillStyle = _color;
	  crc2.fill();
	  crc2.strokeStyle="#bb0000"
	  crc2.stroke();
	  crc2.closePath();
}