JSFiddle - React, Tailwind, and code Playground

by Amar Nyayapati

HTML

<script type="text/javascript">
    var x, y, i=0;
    $(document).ready(function(){
        $("#first").click(function(){
            circle();
        });
    });
    function can(e)
    {
        x=e.clientX;
        y=e.clientY;
        circle();
    }
    function circle()
    {
        var rand = Math.floor(Math.random()*10);
    //alert(rand)
        i = i + 5;
        var c = document.getElementById("first");
        var cxt = c.getContext("2d");
        
        cxt.fillStyle = "#"+Math.floor(Math.random()*10)+""+Math.floor(Math.random()*10)+""+Math.floor(Math.random()*10);
        cxt.beginPath();
        cxt.arc(x,y,i+5,0,Math.PI*2,true);
        cxt.closePath();
        cxt.fill();
        cxt.fillStyle = Math.floor(Math.random()*10)+""+Math.floor(Math.random()*10)+""+Math.floor(Math.random()*10);
        
        var cxt1 = c.getContext("2d");
        cxt1.beginPath();
        cxt1.arc(x,y,i-2,0,Math.PI*2,true);setTimeout("circle()",600);
        cxt1.closePath();
        cxt1.fill();
        i=i-Math.floor(Math.random()*i);
    }
</script>
<body style="margin:0px;">
<canvas id="first" width="900px" height="900px" onmousedown="can(event)" onmouseup="can(event)"></canvas>
</body>

CSS

body{
    background:grey;
}