Untitled

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>Gamedev Canvas Workshop</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        canvas {
            background: #eee;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>

<body>

    <canvas id="myCanvas" width="480" height="320"></canvas>

    <script>
        let ball1 = () => {
            var myCols = ["#525670", "#2f3142", "#9f886d", "#a77098", "#ba6480", "#9571a8", "#ac84c1", "#767ca8", "#1f212d"]
            var xPos = 50
            var yPos = 50
            var size = 10
            var xPlus = size
            var yPlus = size
            var growVelocity = 1

            var canvas = document.getElementById("myCanvas");
            var ctx = canvas.getContext("2d");
            let grow = 0
            let backFill = "#000000"
            let ballFill = "#0095DD"
            ctx.fillStyle = "#0095DD";
            let draw = () => {
                console.log("garegareg")
                grow = 0
                ctx.fillStyle = "blue";

                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = backFill
                ctx.fillRect(0, 0, canvas.width, canvas.height);
                ctx.fillStyle = ballFill
                //backFill
                ctx.beginPath();
                xPos += xPlus
                yPos += yPlus
                if (xPos <= size) {
                    xPos += size - xPos
                    xPlus = 0 - xPlus
                    grow = 1
                }

                if (yPos <= size) {
                    yPos += size - yPos
                    yPlus = 0 - yPlus
                    grow = 1
                }

                if (xPos + size >= canvas.width) {
                    xPos -= xPos + size - canvas.width
                    xPlus = 0 - xPlus
                    grow = 1
                }

                if (yPos + size >= canvas.height) {
                    yPos -= yPos + size - canvas.height
                    yPlus = 0 - yPlus
                    grow = 1
                }
                if (grow) {
                    if (size < canvas.width / 16) {
                        growVelocity = 0 - growVelocity
                    }
                    else if (size < canvas.width / 8) {
                        growVelocity = 0 - growVelocity
                    }
                    else {
                        //growVelocity = 0 - growVelocity
                    }
                    if (xPos < canvas.width / 2) {
                        xPos += 1
                    }
                    else if (xPos > canvas.width / 2) {
                        xPos -= 1
                    }
                    if (yPos < canvas.height / 2) {
                        yPos += 1
                    }
                    else if (yPos > canvas.height / 2) {
                        yPos -= 1
                    }
                    ballFill = myCols[Math.floor(Math.random() * myCols.length)];
                    backFill = myCols[Math.floor(Math.random() * myCols.length)];
                    size += growVelocity
                }


                ctx.arc(xPos, yPos, size, 0, Math.PI * 2);

                ctx.fill();
                ctx.closePath();

                //xPlus += 5
                //yPlus += 5
            }
        }


        setInterval(ball1, 20)
        //onsole.log(ball1)
        //setInterval(ball2.ball, 100);
        console.log("greagaer")
    </script>

</body>

</html>