JSFiddle - React, Tailwind, and code Playground

HTML

<canvas id="canvas" width="500" height="500" style="border:1px solid"></canvas>

JavaScript

var circles = [];
    var canvas=document.getElementById('canvas');
    var context=canvas.getContext('2d');
    var radius=50;
    var nStartX = 0;
    var nStartY = 0;
    var bIsDrawing = false;
    var putPoint = function(e){
      nStartX = e.clientX;nStartY = e.clientY;
      bIsDrawing = true;
      radius = 0;
    }
    var drawPoint = function(e){
      if(!bIsDrawing)
        return;
      canvas=document.getElementById('canvas');
      context=canvas.getContext('2d');
      var nDeltaX = nStartX - e.clientX;
      var nDeltaY = nStartY - e.clientY;
      radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY)
      context.clearRect(0, 0, canvas.width, canvas.height);
      context.beginPath();
      context.arc(nStartX, nStartY, radius, 0, Math.PI*2);
      context.strokeStyle="#000000";
      context.fillStyle="#FFFFFF";
      context.fillStyle = 'rgba(0, 0, 0, 0)';
      context.stroke();
      context.fill();
      circles.forEach(function(circle){
        context.beginPath();
        context.arc(circle.nStartX, circle.nStartY, circle.radius, 0, Math.PI*2);
        context.strokeStyle="#000000";
        context.fillStyle="#FFFFFF";
        context.fillStyle = 'rgba(0, 0, 0, 0)';
        context.stroke();
        context.fill();
      })
    }
    var stopPoint = function(e){
      //context.clip();
      //context.clearRect(0, 0, canvas.width, canvas.height);
      bIsDrawing = false;
      
      var nDeltaX = nStartX - e.clientX;
      var nDeltaY = nStartY - e.clientY;
      radius = Math.sqrt(nDeltaX * nDeltaX + nDeltaY * nDeltaY);
      circles.push({ nStartX: nStartX, nStartY: nStartY, radius: radius });
    }
    canvas.addEventListener('mousedown',putPoint);
    canvas.addEventListener('mousemove',drawPoint);
    canvas.addEventListener('mouseup',stopPoint);