Image Border Creator

function processImage(originalImg, borderColor = "black", borderWidth = 10, borderStyle = "solid") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Validate and parse borderWidth:
    // It might be passed as a string (e.g., "15", "15px") or a number.
    // parseFloat can handle "10px" -> 10.
    // If parsing results in NaN (e.g., for "foo") or if it's not provided (undefined),
    // fall back to the default borderWidth value (10).
    let numBW;
    if (typeof borderWidth === 'string') {
        numBW = parseFloat(borderWidth);
    } else if (typeof borderWidth === 'number') {
        numBW = borderWidth;
    } else {
        // Should not happen if default parameter is set, but as a safeguard
        numBW = 10;
    }

    // If parseFloat resulted in NaN (e.g. input was "abc"), use the default value of 10.
    if (isNaN(numBW)) {
        numBW = 10; // Default borderWidth
    }

    // Ensure borderWidth is not negative.
    const numericBorderWidth = Math.max(0, numBW);

    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // Set canvas dimensions including border
    canvas.width = imgWidth + 2 * numericBorderWidth;
    canvas.height = imgHeight + 2 * numericBorderWidth;

    // If borderWidth is effectively 0, just draw the image onto the canvas and return.
    // The canvas will be the same size as the image.
    if (numericBorderWidth === 0) {
        ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);
        return canvas;
    }

    // Draw the original image onto the canvas, offset by borderWidth.
    // This leaves space around the image for the border.
    ctx.drawImage(originalImg, numericBorderWidth, numericBorderWidth, imgWidth, imgHeight);

    // Prepare for drawing the border
    ctx.strokeStyle = borderColor; // Set border color
    ctx.lineWidth = numericBorderWidth; // Set border thickness

    // Define the rectangle path for the border.
    // The stroke is centered on this path.
    // - Path X, Y: numericBorderWidth / 2
    // - Path Width, Height: imgWidth + numericBorderWidth
    // This geometry ensures the stroke (of width numericBorderWidth) perfectly
    // fills the space between the canvas edge and the drawn image.
    const rectX = numericBorderWidth / 2;
    const rectY = numericBorderWidth / 2;
    const rectWidth = imgWidth + numericBorderWidth;
    const rectHeight = imgHeight + numericBorderWidth;

    // Store original lineCap to restore it later if changed for "dotted" style,
    // as changing lineCap can affect other drawing operations on the same context.
    const originalLineCap = ctx.lineCap;

    ctx.beginPath(); // Start a new path for the border rectangle
    ctx.rect(rectX, rectY, rectWidth, rectHeight); // Define the rectangular path

    // Apply border style
    if (borderStyle === "dashed") {
        // For dashed lines: dash length and gap length are both equal to numericBorderWidth.
        ctx.setLineDash([numericBorderWidth, numericBorderWidth]);
    } else if (borderStyle === "dotted") {
        // For circular dots:
        // 1. Set lineCap to 'round'. This makes the ends of dashes round.
        // 2. Use a dash pattern like [0, gapLength].
        //    A dash length of 0, when combined with 'round' lineCap, creates a circle
        //    with a diameter equal to ctx.lineWidth (which is numericBorderWidth).
        // 3. The 'gapLength' determines the space between one dot's edge and the next dot's edge.
        //    Let's use a gap of numericBorderWidth / 2 for a pleasant spacing.
        ctx.lineCap = 'round';
        ctx.setLineDash([0, numericBorderWidth / 2]);
    } else { // "solid" or any other unspecified style defaults to solid
        ctx.setLineDash([]); // An empty array resets to a solid line.
    }

    ctx.stroke(); // Draw the border along the defined path with current style.

    // Restore canvas context state to prevent side effects on subsequent drawings
    if (borderStyle === "dotted") {
        ctx.lineCap = originalLineCap; // Restore original lineCap if it was changed.
    }
    ctx.setLineDash([]); // Reset line dash pattern to default (solid).

    return canvas;
}