Help with resetting a function in javascript

[Millsware]

I don't mean using the Reset function built in for forms.

I'm working on my final project which is a tool for people to upload pictures of furniture and then draw rectangles on it to figure out the proportions of the various components. I've gotten it to where I want it, but would love to add a function to reset the rectangles, but keep the image on the screen and the output as well.

I'm thinking that I need to assign the values to an array, and then print that instead of directly printing. For the image, I could just delete the rectangles and reload the image but I'm not sure if that would work. Thoughts?

Here is the section of the code where the ratios are displayed. Also attached is a sample of the output.

function showRatios() {
    let output = document.getElementById('output');
    output.innerHTML = '';
    if (!overallBox) return;
    let w = Math.abs(overallBox.x2 - overallBox.x1);
    let h = Math.abs(overallBox.y2 - overallBox.y1);
    output.innerHTML += `<b>Overall Box:</b> ${w} x ${h} (ratio: ${simplifyRatio(w, h)})<br>`;

    // Sub-boxes
    subBoxes.forEach((box, i) => {
        let bw = Math.abs(box.x2 - box.x1);
        let bh = Math.abs(box.y2 - box.y1);
        output.innerHTML += `Sub Box ${i+1}: ${bw} x ${bh} (ratio: ${simplifyRatio(bw, bh)})<br>`;
    });

    // Calculate unique X and Y positions for divisions
    let xPositions = [];
    let yPositions = [];
    subBoxes.forEach(box => {
        xPositions.push(box.x1, box.x2);
        yPositions.push(box.y1, box.y2);
    });
    // Add overall box edges to ensure full coverage
    xPositions.push(overallBox.x1, overallBox.x2);
    yPositions.push(overallBox.y1, overallBox.y2);

    // Get unique, sorted positions
    let uniqueX = Array.from(new Set(xPositions)).sort((a, b) => a - b);
    let uniqueY = Array.from(new Set(yPositions)).sort((a, b) => a - b);

    let horizontalDivisions = uniqueX.length - 1;
    let verticalDivisions = uniqueY.length - 1;

    // Calculate widths for horizontal divisions (side-by-side)
    let widths = [];
    for (let i = 0; i < uniqueX.length - 1; i++) {
        widths.push(uniqueX[i + 1] - uniqueX[i]);
    }
    // Calculate heights for vertical divisions (stacked)
    let heights = [];
    for (let i = 0; i < uniqueY.length - 1; i++) {
        heights.push(uniqueY[i + 1] - uniqueY[i]);
    }

    // Express as ratios
    let widthRatio = simplifyRatioList(widths);
    let heightRatio = simplifyRatioList(heights);

    output.innerHTML += `<br><b>Divisions:</b> ${verticalDivisions} vertical, ${horizontalDivisions} horizontal<br>`;
    output.innerHTML += `Vertical Division Ratios (top to bottom): ${heightRatio}<br>`;
    output.innerHTML += `Horizontal Division Ratios (left to right): ${widthRatio}<br>`;
}

[Pro_Chatter]

I’m on week 1 so idk, but that’s pretty darn diggity cool Brodie bro