JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        
        <style type="text/css">
            
            body {
                background-color: #999;
            }
            
            .anim {
                width: 600px;
                height: 400px;
                background-color: #fff;
            }
            
        </style
    </head>
    <body>
        <canvas id="can" class="anim" width="600" height="400"></canvas>
        <div id="debug"></div>
    </body>
</html>

JavaScript

$(document).ready(function(){

    /* Getting canvas element */
    var canvas = document.getElementById('can');

    /* Checking browser support, if ok then let's do the anim... */
    if(canvas.getContext && canvas.getContext('2d')) {

        /* Getting drawing context */
        var context = canvas.getContext('2d');

        /* Animation object */
        var animation = function() {

            /* list of objects to draw (the circles) */
            var list = [];
            var fps = 24;

            /* Particle object */
            var particle = function() {
                /* Coordinates */
                this.x = 0;
                this.y = 0;

                /* The radius of circles */
                this.radius = 5;

                this.speed_x = 1;
                this.speed_y = 1;

                /* Direction */
                this.dx = 0;
                this.dy = 0;

                this.color = {
                    fill : '#000',
                    stroke : '#000'
                }

                /* Boundaries (canvas width and height) */
                this.bounds = {
                    x0 : 0,
                    x1 : 600,
                    y0 : 0,
                    y1 : 400
                }

                /* Private function for random color but I think you've already guessed that. */
                var random_color = function()
                {
                        var c = Math.round(0xffffff * Math.random());
                        return ('#0' + c.toString(16)).replace(/^#0([0-9a-f]{6})$/i, '#$1');
                }

                /* Function to initialise variables */
                this.init = function() {                           

                    /* Random radius */
                    this.radius = Math.floor(Math.random()*25)

                    /* Taking radius into account */
                    this.bounds.x0 += this.radius;
                    this.bounds.x1 -= this.radius;
                   ...