JSFiddle - React, Tailwind, and code Playground

by Amatewasu

HTML

<canvas id="canvas" width="300px" height="300px"></canvas>
<canvas id="canvasTool" width="290px" height="300px" style="display: none;"></canvas>

CSS

body {
    text-align: center;
    background-color: black;
}

JavaScript

var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext("2d"),
    canvasTool = document.getElementById('canvasTool'),
    ctxTool = canvasTool.getContext("2d");

var y = 40,
    direction = 0, // 0 = down, 1 = up
    changeColor = 1, // 0 = --, 1 = ++
    color = [
        0, // red
        0, // green
        0 // blue
    ],
    colorChange = 0,
    angle = 0;

function draw(){ 
    ctxTool.drawImage(canvas, 18, 0, 262, 300, 10, 0, 262, 300);
    ctxTool.fillStyle = "rgba(0, 0, 0, 0.03)";
    ctxTool.fillRect(0, 0, 300, 300);
    
    ctx.drawImage(canvasTool, 10, 0);
    
    ctx.fillStyle = "rgb("+ color[0] +","+ color[1] +","+ color[2] +")";
    ctx.fillRect(10, y, 20, 20);
    
    if (y <= 40){
        direction = 0;
    } else if (y >= 250){
        direction = 1;
    }
    y += (direction ? -3 : 3);
    
    if (angle >= 361) angle = 0;
    angle++;
    
    refreshColors();
}
    
function refreshColors(){
    if (color[colorChange] >= 255 || color[colorChange] <= 0){
        color[colorChange] = (color[colorChange] >= 255 ? 255 : 0);
        
        colorChange = Math.floor(Math.random() * 3);
        changeColor = (color[colorChange] === 255 ? 0 : 1);
    } 
    
    color[colorChange] += (changeColor ? 3 : -3);
}
  
ctx.fillStyle = "black";
ctx.fillRect(0, 0, 300, 300);
ctxTool.fillStyle = "black";
ctxTool.fillRect(0, 0, 300, 300);

ctx.save();

setInterval(draw, 50);