JSFiddle - React, Tailwind, and code Playground

HTML

<canvas width='500' height='500' id='display'></canvas>

JavaScript

var canvas = document.getElementById('display').getContext('2d');
var samples = 3000;

for(var i=0; i!=samples; ++i)
{
   var point = calculatePoint(110, 110, 100, false);
   drawCircle(canvas, point.x, point.y, 1);
}

for(var i=0; i!=samples; ++i)
{
   var point = calculatePoint(350, 110, 100, true);
   drawCircle(canvas, point.x, point.y, 1);
}

function drawCircle(canvas, x, y, radius)
{
    canvas.beginPath();
    canvas.arc(x, y, radius, 0, Math.PI*2, true); 
    canvas.closePath();
    canvas.fill();
}

function calculatePoint(originX, originY, radius, isUniform)
{
    var angle = Math.random() * Math.PI * 2;
    var r = (isUniform ? Math.sqrt(Math.random()) : Math.random()) * radius;
    var x = originX + r * Math.cos(angle);
    var y = originY + r * Math.sin(angle);
    return { x: x, y: y };
}