JSFiddle - React, Tailwind, and code Playground

by Andrew Gerst

HTML

<canvas id="MyCanvas" width="720" height="720"></canvas>

CSS

body
        {
            background-color: #777;
        }
        #MyCanvas
        {
            top: 10px;
            left: 10px;
            height: 720px;
            width: 720px;
            border: 2px solid white;
            background-color: #000;
        }

JavaScript

var radius = 10;
        var step = x = y = 0;
        var r = g = b = 127;
        var circleHolder = [];
        var currentCircle;
        var deb = document.getElementById("debug");
        var loop = setInterval(update, 30);
        
        function Circle(x, y, radius, r, g, b)
        {
            this.x = x;
            this.y = y;
            this.radius = radius;
            this.r = r;
            this.g = g;
            this.b = b;
            Circle.prototype.ctx = document.getElementById("MyCanvas").getContext("2d");
            Circle.prototype.ctx.strokeStyle = "rgb("+ this.r +", "+ this.g +", "+ this.b +")";
            Circle.prototype.ctx.clearRect(0,0,720,720); // clear canvas
            circleHolder.push(this);
        }

        Circle.prototype.draw = function()
        {
            Circle.prototype.ctx.beginPath();
            Circle.prototype.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
            Circle.prototype.ctx.stroke();
        };

        Circle.prototype.update = function()
        {
            step += 0.002;
            step %= 2 * Math.PI;
            this.radius += 4;
            if (this.radius > 128)
            {
                for (i in circleHolder)
                {
                    if (circleHolder[i]==this)
                    {
                        circleHolder.splice(i, 1);
                    }
                }
            }
        };

        function update()
        {
            var ci = new Circle(x, y, radius, r, g, b);
            ci.x = parseInt((Math.sin(step)) * 150, 10) + 360;
            ci.y = parseInt((Math.cos(step)) * 150, 10) + 360;
            var allCircles = circleHolder.length;
            for (var i=0; i < allCircles; i++)
            {
                ci = circleHolder[i];
                ci.update();
                ci.draw();
            }
        }