Image Shadow Effect Adder

function processImage(originalImg, shadowColor = 'rgba(0,0,0,0.5)', shadowBlur = 10, shadowOffsetX = 5, shadowOffsetY = 5) {
    // Ensure numeric parameters are parsed correctly and shadowBlur is non-negative.
    const blur = Math.max(0, Number(shadowBlur));
    const offsetX = Number(shadowOffsetX);
    const offsetY = Number(shadowOffsetY);

    // Use naturalWidth and naturalHeight for intrinsic image dimensions.
    const imgWidth = originalImg.naturalWidth;
    const imgHeight = originalImg.naturalHeight;

    // If image has no dimensions (e.g., not loaded or 0x0), return an empty canvas or handle error.
    // For simplicity, this function will proceed, possibly creating a canvas that only shows a shadow if blur/offset are non-zero.

    // Calculate the overall bounding box required for the image and its shadow.
    // We model this by imagining the image is drawn starting at (0,0) in an infinite space.
    // The shadow is then cast relative to this image.

    // The leftmost point can be the image's left edge (0) or the shadow's left edge (offsetX - blur).
    const overallLeftBoundary = Math.min(0, offsetX - blur);
    // The rightmost point can be the image's right edge (imgWidth) or the shadow's right edge (offsetX + imgWidth + blur).
    const overallRightBoundary = Math.max(imgWidth, offsetX + imgWidth + blur);

    // The topmost point can be the image's top edge (0) or the shadow's top edge (offsetY - blur).
    const overallTopBoundary = Math.min(0, offsetY - blur);
    // The bottommost point can be the image's bottom edge (imgHeight) or the shadow's bottom edge (offsetY + imgHeight + blur).
    const overallBottomBoundary = Math.max(imgHeight, offsetY + imgHeight + blur);

    // The canvas dimensions are the total width and height of this bounding box.
    const canvasWidth = overallRightBoundary - overallLeftBoundary;
    const canvasHeight = overallBottomBoundary - overallTopBoundary;

    // Create the canvas element.
    const canvas = document.createElement('canvas');
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    
    const ctx = canvas.getContext('2d');

    // Determine the actual drawing position of the image on the canvas.
    // This is calculated by shifting the conceptual (0,0) origin of the image
    // so that the overallLeftBoundary aligns with canvas x=0 and overallTopBoundary aligns with canvas y=0.
    const drawX = -overallLeftBoundary;
    const drawY = -overallTopBoundary;

    // Configure the shadow properties on the canvas context.
    // Ensure shadowColor is a string, as per Canvas API requirements.
    ctx.shadowColor = String(shadowColor);
    ctx.shadowBlur = blur;
    ctx.shadowOffsetX = offsetX;
    ctx.shadowOffsetY = offsetY;

    // Draw the image onto the canvas at the calculated position.
    // The canvas context will automatically apply the configured shadow effect to this drawing operation.
    ctx.drawImage(originalImg, drawX, drawY, imgWidth, imgHeight);

    // Return the canvas element with the image and its shadow.
    return canvas;
}