CNC Circle Holes

<html>
    <body>
        <canvas id="canvas" width="300" height="300"></canvas><br>
        <label>holes:</label><input type="text" id="numHoles" value="0"/><br>
        <label>diameter:</label><input type="text" id="diameter" value="0"/><br>
        <label>hole diameter (for visual only):</label><input type="text" id="holediameter" value="0"/><br>
        <label>x0:</label><input type="text" id="x0" value="0"/><br>
        <label>y0:</label><input type="text" id="y0" value="0"/><br>
        <label>Start Rotation (degrees, added before calculations):</label><input type="text" id="rotation" value="0"/><br>
        <label>Smallest Number (values less than this round to 0):</label><input type="text" id="delta" value="0.000001"/><br>
        <label>Decimal Places:</label><input type="text" id="decimals" value="5"/><br>
        <input type="button" id="draw" value="Draw"></button><br>
        <textarea class="textarea" id="text_box" rows="10" cols="50"></textarea>

        <script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");


// Set line width
ctx.lineWidth = 1;

// Wall
//ctx.strokeRect(75, 140, 150, 110);

// Door
//ctx.fillRect(130, 190, 40, 60);

// Roof
//ctx.beginPath();
//ctx.moveTo(50, 140);
//ctx.lineTo(150, 60);
//ctx.lineTo(250, 140);
//ctx.closePath();
//ctx.stroke();
canvasSize = 300;
canvasCenterX = canvasSize/2;
canvasCenterY = canvasSize/2;
renderMultiplier = 1;
function drawCircle(x,y,r) {
    ctx.beginPath();
    //canvasSize - y flips it because yk
    ctx.arc(canvasCenterX+(x*renderMultiplier), canvasSize-(canvasCenterY+(y*renderMultiplier)), r*renderMultiplier, 0, 2 * Math.PI);
    ctx.stroke();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    numHoles = parseFloat(document.getElementById('numHoles').value);
    diameter = parseFloat(document.getElementById('diameter').value);
    holediameter = parseFloat(document.getElementById('holediameter').value);
    x0 = parseFloat(document.getElementById('x0').value);
    y0 = parseFloat(document.getElementById('y0').value);
    roation = parseFloat(document.getElementById('rotation').value);
    delta = parseFloat(document.getElementById('delta').value);
    decimals = parseInt(document.getElementById('decimals').value);

    renderMultiplier = (canvasSize/2)/diameter;//we want diameter to be half of the height, so when diameter is 150 and height is 300 this value is 1. diameter=300 height=300 this value is 1/2


    r = diameter/2;
    drawCircle(0,0,r);

    ctx.font = "24px serif";
    ctx.fillText("0°→+", canvasSize/2, canvasSize-(canvasSize/8*6.7));

    text = "";

    radIncrement = ((Math.PI * 2)/numHoles);
    radAddition = roation * Math.PI/180;
    for (i = 0; i < numHoles; i++) {
        angle = radIncrement * i;
        x = r*Math.sin(angle+radAddition);
        y = r*Math.cos(angle+radAddition);
        drawCircle(x,y,holediameter/2);

        if (Math.abs(y) < delta) {
            y = 0;
        }
        if (Math.abs(x) < delta) {
            x = 0;
        }
        text += (x+x0).toFixed(decimals)+", "+(y+y0).toFixed(decimals)+"\n";
    }

    document.getElementById("text_box").innerHTML = text;
}
function output(x,y) {
    return x+", "+y+"\n";
}
document.getElementById("draw").onclick = draw;
         </script>
    </body>
</html>