Image Sundial Shadow Filter Effect

function processImage(originalImg, shadowColor = "rgba(0, 0, 0, 0.7)", shadowOffsetX = 10, shadowOffsetY = 10, shadowBlur = 5) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Ensure shadowBlur is not negative, as negative values can cause rendering issues or errors.
    const actualShadowBlur = Math.max(0, shadowBlur);

    // Calculate canvas dimensions.
    // The canvas needs to be large enough to contain:
    // 1. The original image.
    // 2. The blur effect, which expands outwards from the shadow shape (hence actualShadowBlur * 2 for both dimensions).
    // 3. The shadow's offset from the image (Math.abs(shadowOffsetX/Y) as offset can be in any direction).
    canvas.width = originalImg.naturalWidth + (actualShadowBlur * 2) + Math.abs(shadowOffsetX);
    canvas.height = originalImg.naturalHeight + (actualShadowBlur * 2) + Math.abs(shadowOffsetY);

    // Determine the position where the image will be drawn on the canvas.
    // This position must account for shadows that might fall to the left or above the image.
    // Start with a base padding of `actualShadowBlur` on the top-left. This provides space for the blur
    // on the side of the image opposite to where the shadow is offset.
    let drawX = actualShadowBlur;
    if (shadowOffsetX < 0) {
        // If the shadow is offset to the left, the image needs to be shifted further to the right
        // to make space for this negative offset and its blur.
        drawX += Math.abs(shadowOffsetX);
    }

    let drawY = actualShadowBlur;
    if (shadowOffsetY < 0) {
        // If the shadow is offset upwards, the image needs to be shifted further down.
        drawY += Math.abs(shadowOffsetY);
    }
    
    // Configure the shadow properties on the canvas context.
    // These settings will apply to the next drawing operation (ctx.drawImage).
    ctx.shadowColor = shadowColor;
    ctx.shadowOffsetX = shadowOffsetX;
    ctx.shadowOffsetY = shadowOffsetY;
    ctx.shadowBlur = actualShadowBlur;

    // Draw the original image onto the canvas at the calculated (drawX, drawY) position.
    // The browser's rendering engine will automatically draw the shadow based on the context's shadow properties.
    ctx.drawImage(originalImg, drawX, drawY, originalImg.naturalWidth, originalImg.naturalHeight);

    // The canvas now holds the image with the applied shadow effect.
    return canvas;
}