Image Circular Guides Adder

function processImage(
    originalImg,
    numCircles = 3,
    lineColor = "rgba(255, 0, 0, 0.5)",
    lineWidth = 1,
    centerX = "50%",
    centerY = "50%",
    maxRadius = "45%"
) {
    // Convert parameters to their intended types, providing safety for numeric values.
    // parseInt/parseFloat will handle if they are already numbers or string representations.
    const _numCircles = parseInt(String(numCircles), 10);
    const _lineWidth = parseFloat(String(lineWidth));

    const canvas = document.createElement('canvas');
    // Use naturalWidth/Height for actual image dimensions, fallback to width/height
    const canvasWidth = originalImg.naturalWidth || originalImg.width;
    const canvasHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = canvasWidth;
    canvas.height = canvasHeight;

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

    // Draw the original image onto the canvas.
    // A try-catch block can be useful if originalImg might be in an error state,
    // though drawImage is generally robust with valid Image objects.
    try {
        ctx.drawImage(originalImg, 0, 0, canvasWidth, canvasHeight);
    } catch (e) {
        console.error("Error drawing original image: ", e);
        // Return the canvas, potentially empty or partially drawn, if image fails.
        // This ensures a canvas is always returned as per requirements.
        return canvas;
    }
    
    // If canvas dimensions are zero (e.g., image not loaded or is a 0x0 image),
    // no guides can be meaningfully drawn. The image (if any) is already on the canvas.
    if (canvasWidth === 0 || canvasHeight === 0) {
        return canvas;
    }

    // Helper function to parse dimension values.
    // These values can be numbers (interpreted as pixels) or strings ending with '%' (percentage).
    const parseUnitValue = (value, totalSize) => {
        const valStr = String(value).trim(); // Ensure value is a string and trim whitespace
        if (valStr.endsWith('%')) {
            // Calculate value from percentage
            return (parseFloat(valStr.slice(0, -1)) / 100) * totalSize;
        }
        // Assume pixels if no '%' suffix. parseFloat handles strings like "100px" by parsing "100".
        return parseFloat(valStr);
    };

    // Calculate final pixel values for center coordinates and maximum radius
    const _centerX = parseUnitValue(centerX, canvasWidth);
    const _centerY = parseUnitValue(centerY, canvasHeight);
    
    // maxRadius is interpreted as a percentage of the smaller image dimension, or a fixed pixel value.
    const smallerDimension = Math.min(canvasWidth, canvasHeight);
    const _maxRadius = parseUnitValue(maxRadius, smallerDimension);

    // Proceed to draw circular guides only if all numeric parameters are valid
    // and define drawable shapes (e.g., positive number of circles, positive line width).
    if (
        !isNaN(_numCircles) && _numCircles > 0 &&
        !isNaN(_lineWidth) && _lineWidth > 0 &&
        !isNaN(_centerX) && // Check if centerX resolved to a valid number
        !isNaN(_centerY) && // Check if centerY resolved to a valid number
        !isNaN(_maxRadius) && _maxRadius > 0 // Check if maxRadius is a positive number
    ) {
        ctx.strokeStyle = String(lineColor); // Ensure lineColor is treated as a string (for valid CSS color string)
        ctx.lineWidth = _lineWidth;

        const radiusStep = _maxRadius / _numCircles;

        for (let i = 1; i <= _numCircles; i++) {
            const currentRadius = radiusStep * i;
            
            // currentRadius will be positive if _maxRadius and _numCircles are positive.
            ctx.beginPath();
            ctx.arc(_centerX, _centerY, currentRadius, 0, 2 * Math.PI); // Draw a full circle
            ctx.stroke();
        }
    }

    return canvas;
}