Image Mirror Filter Effect Tool

function processImage(originalImg, direction = "horizontal") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Use naturalWidth/Height for actual image dimensions.
    // Fallback to width/hHeight if naturalWidth/Height are not available (e.g. for other image-like sources).
    // This is robust for HTMLImageElement, and also works if originalImg happens to be an HTMLCanvasElement.
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // Save the current canvas state (transformations, styles, etc.)
    ctx.save();

    // Normalize the direction parameter to lowercase string to make it case-insensitive
    // and robust against non-string inputs.
    const normalizedDirection = String(direction).toLowerCase();

    if (normalizedDirection === "horizontal") {
        // For horizontal mirror:
        // 1. Translate the context's origin to the right edge of the canvas (imgWidth, 0).
        // 2. Scale the context horizontally by -1. This flips the x-axis.
        // Subsequent drawing operations will be mirrored horizontally.
        ctx.translate(imgWidth, 0);
        ctx.scale(-1, 1);
    } else if (normalizedDirection === "vertical") {
        // For vertical mirror:
        // 1. Translate the context's origin to the bottom edge of the canvas (0, imgHeight).
        // 2. Scale the context vertically by -1. This flips the y-axis.
        // Subsequent drawing operations will be mirrored vertically.
        ctx.translate(0, imgHeight);
        ctx.scale(1, -1);
    } else {
        // Default behavior if an unrecognized direction is provided.
        // The problem states "Mirror Filter Effect Tool", so it should apply a mirror.
        // We'll default to horizontal mirror and log a warning.
        console.warn(`Invalid mirror direction: "${direction}". Defaulting to horizontal mirror.`);
        ctx.translate(imgWidth, 0);
        ctx.scale(-1, 1);
    }

    // Draw the image onto the transformed context.
    // The image is drawn starting at (0,0) in the *transformed* coordinate system.
    // Due to the transformations, this results in a mirrored image on the canvas.
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // Restore the canvas state to what it was before ctx.save().
    // This resets transformations, ensuring that if this canvas context were to be used
    // further (which it isn't in this specific function as we return the canvas),
    // those operations wouldn't be affected by the mirroring transformations.
    ctx.restore();

    return canvas;
}