JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Canvas</title>
        <script src="shapes.js"></script>
        
    </head>
    <body>
        
        <canvas id="canvas" width="600" height="600">
            Your browser does not support canvas!
            link to chrome
        </canvas>
        <script>
            var TWO_PI = Math.PI * 2;
            var canvas = document.getElementById("canvas");
            var c = canvas.getContext("2d");
            
            c.fillStyle = "grey";
            c.fillRect(0, 0, canvas.width, canvas.height);
            
            document.onmousemove = function(e){
            
            }
            
            for (i=0;i<=100;i++){
            c.fillStyle = "rgba(255,255,0,0.3)";
            circle(Math.random() * 600, Math.random() * 600, 1*i);
            c.fill();
            
            }
            
            function circle(x, y, radius){
            c.beginPath();
            c.arc(x, y, radius, 0, Math.random()*TWO_PI, false);
            c.closePath();
            }
            
            
            
            </script>
            
            </body>
            </html>

CSS

<style>
html, body{
    margin : 0;
    padding : 0; 
}
</style>