JSFiddle - React, Tailwind, and code Playground

HTML

<title>Growing Circles</title>
<link rel="stylesheet" type="text/css" href="ripple.css" />

</head>
<body>

<canvas id="canvas1"> </canvas>

<script type="text/javascript" src="ripple.js"></script>
</body>
</html>

CSS

canvas, div{
	padding: 0 0;
	margin: 0 0;
}

#canvas1{ 
	margin: 0 0;
	z-index: -1;
	}
	
body, html{
	padding: 0, 0;
	margin: 0 0;
	overflow: hidden;
}

JavaScript

var canvas = document.getElementById('canvas1');
var ctx = canvas.getContext('2d');

window.addEventListener('resize', resizeCanvas, false);


function resizeCanvas() {
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	
}

resizeCanvas();

function getMousePos(canvas, evt) {
    var rect = canvas.getBoundingClientRect(), root = document.documentElement;

    // return relative mouse position
    var mouseX = evt.clientX - rect.left - root.scrollLeft;
    var mouseY = evt.clientY - rect.top - root.scrollTop;
    return {
      x: mouseX,
      y: mouseY
    };
  }



    canvas.addEventListener('click', function(evt) {
      var mousePos = getMousePos(canvas, evt);
      var message = "Mouse position: " + mousePos.x + "," + mousePos.y;
	  var colour= '#'+Math.floor(Math.random()*16777215).toString(16); //16777215 is the decimal value of #FFFFFF
	 
		circ(mousePos.x, mousePos.y, 5, colour);
		
	}, false);

function circ(x, y, rad, c){	
	//var colour= '#'+Math.floor(Math.random()*16777215).toString(16);
		//ctx.clearRect(0,0,canvas.width,canvas.height);
		ctx.beginPath();
		ctx.arc(x, y, rad, 0, 2 * Math.PI, false);
		
		ctx.lineWidth = 5;
		ctx.strokeStyle = c;
		ctx.stroke();
		function2();
		function function2(){
			ctx.beginPath();
			ctx.arc(x, y, rad, 0, 2 * Math.PI, false);
			
			ctx.lineWidth = 5;
			ctx.strokeStyle = c;
			ctx.stroke();
			rad+=3;
			if(rad<=canvas.width){
				function2();
			}
		}
		
}