Image Golden Ratio Face Creator

/**
 * Overlays a golden ratio face mask/grid onto an image.
 * This function draws a series of lines and rectangles representing the ideal proportions of a face
 * according to the golden ratio (phi ≈ 1.618) on top of the provided image.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {number} [maskX=-1] The x-coordinate for the top-left corner of the mask. Defaults to centering the mask.
 * @param {number} [maskY=-1] The y-coordinate for the top-left corner of the mask. Defaults to centering the mask.
 * @param {number} [maskWidth=-1] The width of the mask. The height is calculated automatically. Defaults to 80% of the image width.
 * @param {string} [maskColor='#FFD700'] The color of the mask lines (e.g., hex code, color name).
 * @param {number} [lineWidth=2] The thickness of the mask lines in pixels.
 * @param {number} [opacity=0.7] The opacity of the mask, from 0 (transparent) to 1 (opaque).
 * @returns {HTMLCanvasElement} A new canvas element with the original image and the golden ratio mask drawn on it.
 */
function processImage(originalImg, maskX = -1, maskY = -1, maskWidth = -1, maskColor = '#FFD700', lineWidth = 2, opacity = 0.7) {
    // Create a new canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to match the original image
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // Draw the original image as the background
    ctx.drawImage(originalImg, 0, 0);

    // Define the Golden Ratio constant
    const phi = (1 + Math.sqrt(5)) / 2;

    // --- Calculate mask dimensions and position ---
    // If maskWidth is the default (-1), scale it to 80% of the image width for a good fit.
    const w = (maskWidth === -1) ? canvas.width * 0.8 : parseFloat(maskWidth);
    // The height of the mask is determined by multiplying the width by the golden ratio.
    const h = w * phi;
    // If maskX/Y are the defaults (-1), center the mask on the canvas.
    const x = (maskX === -1) ? (canvas.width - w) / 2 : parseFloat(maskX);
    const y = (maskY === -1) ? (canvas.height - h) / 2 : parseFloat(maskY);

    // Save the current canvas state before applying new styles
    ctx.save();

    // Set the drawing style for the mask
    ctx.globalAlpha = parseFloat(opacity);
    ctx.strokeStyle = maskColor;
    ctx.lineWidth = parseFloat(lineWidth);
    ctx.beginPath();

    // --- Draw the Golden Ratio Grid ---
    // This grid is based on dividing the mask's dimensions by the golden ratio
    // to show key proportional landmarks.

    // Helper function to draw a line relative to the mask's origin (x, y)
    const line = (x1, y1, x2, y2) => {
        ctx.moveTo(x + x1, y + y1);
        ctx.lineTo(x + x2, y + y2);
    };

    // 1. Draw the outer bounding box of the mask
    ctx.rect(x, y, w, h);

    // 2. Draw horizontal lines based on golden ratio divisions.
    // These lines often correspond to key facial features.
    const y1 = h / (phi * phi); // Golden section from the top (hairline/eyebrows)
    const y2 = h / phi; // Golden section from bottom (nose bottom)
    line(0, y1, w, y1);
    line(0, y2, w, y2);

    // Mouth line is the golden section of the distance between the nose bottom and chin
    const y_mouth = y2 + (h - y2) / phi;
    line(0, y_mouth, w, y_mouth);

    // Eye line can be estimated as the golden section between the hairline and mouth line
    const y_eyes = y1 + (y_mouth - y1) / phi;
    line(0, y_eyes, w, y_eyes);

    // 3. Draw vertical lines based on golden ratio divisions.
    // These lines help align the width of facial features.
    const x1 = w / (phi * phi); // Golden section from the left edge (outer eye)
    const x2 = w / phi; // Golden section from the right edge (inner eye/nose side)
    line(x1, 0, x1, h);
    line(x2, 0, x2, h);

    // Draw symmetrical lines on the other side
    line(w - x1, 0, w - x1, h);
    line(w - x2, 0, w - x2, h);

    // 4. Draw a central vertical line for symmetry
    line(w / 2, 0, w / 2, h);

    // Execute the drawing command to render all defined paths
    ctx.stroke();

    // Restore the canvas state to its original settings (e.g., removing opacity)
    ctx.restore();

    // Return the final canvas element
    return canvas;
}