JSFiddle - React, Tailwind, and code Playground
HTML
<canvas id="canvas" width="200" height="200"></canvas>
JavaScript
const canvas = document.getElementById('canvas')
const ctx = canvas.getContext('2d')
ctx.beginPath()
ctx.arc(canvas.width / 2, canvas.height / 2, canvas.width / 2, 0, 2 * Math.PI)
ctx.stroke()
ctx.fillStyle = '#00000044'
for (let i = 0; i < 50000; i++) {
let x_2 = Math.random()
let y_2 = Math.random() *Â (1 - x_2)
let x = Math.sqrt(x_2)
let y = Math.sqrt(y_2)
// if (Math.random() > 0.5) x *= -1; // flip x randomly
// if (Math.random() > 0.5) y *= -1; // flip y randomly
// if (Math.random() > 0.5) [x, y] = [y, x]; // swap randomly
ctx.fillRect((x + 1) * canvas.width / 2,
(y + 1) * canvas.height / 2, 1,1)
}