Untitled

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Colorwave</title>
    <link rel="stylesheet" href="style.css">
    <style>
        * {
            margin: 0;
        }

        canvas {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            box-shadow: 0 0 0 2px yellow;
            background-color: #323232;
        }

        body {
            background-color: #969696;
            height: 100vh;
        }
    </style>
</head>

<body>
    <canvas id="canvas" width="800" height="600"></canvas>
    <script src="script.js">
        var canvas = document.getElementById('canvas');
        var ctx = canvas.getContext('2d');

        function randomColor() {
            var deg = Math.random() * 360;
            return `hsl(${deg}, 60%, 50%)`;
        }

        var xPos = 0;
        var yPos = -50;

        function drawSquare() {
            if (yPos > 600) {
                xPos += 50;
                yPos = -50;
            }

            if (yPos == -50)
                ctx.fillStyle = randomColor();

            ctx.fillRect(xPos, yPos, 50, 50);
            yPos += 20;

            window.requestAnimationFrame(drawSquare);
        }
        window.requestAnimationFrame(drawSquare);
    </script>
</body>

</html>