JSFiddle - React, Tailwind, and code Playground

by Adolfo

HTML

<!DOCTYPE html>  
 <html>  
 <head>  
   <meta charset="utf-8" />  
   <meta name="viewport" content="width=device-width">  
   <title>Gamedev Canvas Workshop</title>  
   <link href="index.css" rel="stylesheet" type="text/css" />  
 </head>  
 <body>  
 <canvas id="myCanvas" width="400" height="400"></canvas>  
 <script src="index.js"></script>  
 </body>  
 </html>

CSS

* { padding: 0; margin: 0; }  
        canvas { background: #eee; display: block; margin: 0 auto; }

JavaScript

var canvas = document.getElementById("myCanvas");  
var ctx = canvas.getContext("2d");  
function draw(){
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	ctx.beginPath();  
 	for (i = 0; i < 100000; i++) {  
  	x=Math.floor(Math.random() * canvas.width) + 1-canvas.width/2;  
  	y=Math.floor(Math.random() *canvas.height) + 1-canvas.width/2;  
      if (y<Math.sqrt((canvas.width/2)**2-x**2) && y>-Math.sqrt((canvas.width/2)**2-x**2)){  
      	ctx.fillRect(x+canvas.width/2,y+canvas.width/2,1,1);  
  		}  
 		}  
 ctx.closePath();  
}
setInterval(draw, 100);