Image Flipping Tool

function processImage(originalImg, flipHorizontal = "true", flipVertical = "false") {
    const canvas = document.createElement('canvas');
    
    // Use naturalWidth and naturalHeight for the intrinsic dimensions of the image.
    // These are 0 if the image is not loaded or is invalid.
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // If the image has no dimensions (e.g., it's not loaded or is an invalid image),
    // set canvas dimensions to 0x0 and return it.
    // Accessing getContext('2d') on a 0-dimension canvas can return null or behave unexpectedly.
    if (w === 0 || h === 0) {
        canvas.width = 0;
        canvas.height = 0;
        return canvas;
    }

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

    // Set canvas dimensions to the image's dimensions
    canvas.width = w;
    canvas.height = h;

    // Parse string parameters to boolean values.
    // String(param).toLowerCase() === "true" robustly handles various "true" like inputs (e.g., "True", true).
    const doFlipHorizontal = String(flipHorizontal).toLowerCase() === "true";
    const doFlipVertical = String(flipVertical).toLowerCase() === "true";

    let scaleX = 1;
    let scaleY = 1;
    let translateX = 0;
    let translateY = 0;

    // Determine scaling and translation based on flip parameters
    if (doFlipHorizontal) {
        scaleX = -1;        // Flip the X axis
        translateX = w;     // Translate so the flip happens around the image's vertical midline
    }

    if (doFlipVertical) {
        scaleY = -1;        // Flip the Y axis
        translateY = h;     // Translate so the flip happens around the image's horizontal midline
    }

    // Apply transformations
    // 1. Translate the context. This moves the origin (0,0) of the canvas.
    //    If flipping horizontally, origin moves to (width, 0).
    //    If flipping vertically, origin moves to (0, height).
    //    If both, origin moves to (width, height).
    ctx.translate(translateX, translateY);

    // 2. Scale the context. This flips the axes if scale factor is -1.
    //    The scaling happens relative to the new origin set by translate.
    ctx.scale(scaleX, scaleY);
    
    // Draw the image onto the transformed canvas.
    // The image is drawn starting at (0,0) in the *newly transformed* coordinate space.
    // For example, with horizontal flip:
    // - ctx.translate(w, 0) moves origin to canvas right edge.
    // - ctx.scale(-1, 1) inverts x-axis.
    // - ctx.drawImage(originalImg, 0, 0, w, h) draws image:
    //   - Its top-left (0,0) at transformed (0,0) -> canvas (w,0).
    //   - Its top-right (w,0) at transformed (w,0) -> canvas (-w relative to new origin), i.e., (w + w*(-1), 0) = (0,0).
    // This results in the image being drawn flipped.
    ctx.drawImage(originalImg, 0, 0, w, h);

    // The canvas now contains the flipped image.
    return canvas;
}