<p>Pi = <span class="pi">0</span>
  <br>
  PI = 3.141592653589793
</p>
<canvas width="800" height="800"></canvas>

body {
  margin: 0;
  padding: 0;
}

canvas {
  width: 800px;
  height: 800px;
  background-color: #000;
}

p {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  color: #fff;
}

const canvas = document.querySelector(`canvas`);
const pi = document.querySelector(`.pi`);

const ctx = canvas.getContext(`2d`);

const WIDTH = canvas.width;
const RADIUS = WIDTH / 2; // circle radius

const random = (min, max) => {
  // random number from min to max
  const rand = min + Math.random() * (max - min);
  return Math.floor(rand);
}

ctx.translate(RADIUS, RADIUS); // set (0, 0) at center

ctx.fillStyle = `#fff`;
ctx.arc(0, 0, RADIUS, 0, 360); // draw white circle
ctx.fill();

ctx.fillStyle = "#f00";

let total = 0; // total points
let inCircle = 0; // points outside circle

let closest = Infinity;

setInterval(() => {
  // 10 draws per interval
  for (let i = 0; i < 10; i++) {
    total++;
  
    // random position of dot
    const dot = [random(-RADIUS, RADIUS), random(-RADIUS, RADIUS)];
    ctx.fillRect(...dot, 5, 5); // draw dot

    // equation of a circle
    // if x squared plus y squared is greater tha radius squared => dot is outside
    if ((dot[0] ** 2 + dot[1] ** 2) <= RADIUS ** 2) {
      inCircle++;
    }
    
    const tempPI = 4 * inCircle / total
    
    if (Math.abs(Math.PI - tempPI) < Math.abs(Math.PI - closest)) {
      closest = tempPI;
      pi.textContent = closest;
    }
  }
  
  // show value of PI
}, 50);