4 Way Image Mirror Effect Generator

function processImage(originalImg, mode = "shrink") {
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

    // Use natural dimensions if available, fallback to provided width/height
    let w = originalImg.naturalWidth || originalImg.width;
    let h = originalImg.naturalHeight || originalImg.height;
    
    let targetW, targetH;

    // Determine the size of the final canvas based on the chosen mode
    // "expand": output is 2x wider and 2x higher than original (preserves full resolution)
    // "shrink": output resembles the original size, scaled down to 4 quadrants
    if (mode === "expand") {
        targetW = w;
        targetH = h;
        canvas.width = w * 2;
        canvas.height = h * 2;
    } else {
        // Ensure even canvas sizes if the original lengths were odd numbers
        targetW = Math.round(w / 2);
        targetH = Math.round(h / 2);
        canvas.width = targetW * 2;
        canvas.height = targetH * 2;
    }

    // Improve image smoothing for highest quality downscaling/drawing
    ctx.imageSmoothingEnabled = true;
    ctx.imageSmoothingQuality = "high";

    // 1. Top-Left Quadrant: Original image orientation
    ctx.save();
    ctx.drawImage(originalImg, 0, 0, targetW, targetH);
    ctx.restore();

    // 2. Top-Right Quadrant: Flipped Horizontally
    ctx.save();
    ctx.translate(canvas.width, 0);
    ctx.scale(-1, 1);
    // As canvas is scaled negatively, drawing 0 to targetW paints onto the top-right block
    ctx.drawImage(originalImg, 0, 0, targetW, targetH); 
    ctx.restore();

    // 3. Bottom-Left Quadrant: Flipped Vertically
    ctx.save();
    ctx.translate(0, canvas.height);
    ctx.scale(1, -1);
    ctx.drawImage(originalImg, 0, 0, targetW, targetH);
    ctx.restore();

    // 4. Bottom-Right Quadrant: Flipped Horizontally & Vertically
    ctx.save();
    ctx.translate(canvas.width, canvas.height);
    ctx.scale(-1, -1);
    ctx.drawImage(originalImg, 0, 0, targetW, targetH);
    ctx.restore();

    return canvas;
}