Image Fibonacci Overlay Adder

/**
 * Adds a Fibonacci spiral overlay to an image.
 * The overlay consists of grid lines partitioning the image and a spiral
 * that approximates the golden spiral, fitting within the image's dimensions.
 *
 * @param {Image} originalImg The original image object to add the overlay to.
 * @param {string} [color='rgba(255, 255, 0, 0.7)'] The CSS color string for the overlay lines.
 * @param {number} [lineWidth=2] The width of the overlay lines in pixels.
 * @param {string} [startCorner='top-left'] The corner from which the spiral originates.
 *   Valid options are 'top-left', 'top-right', 'bottom-left', or 'bottom-right'.
 * @returns {HTMLCanvasElement} A new canvas element displaying the image with the Fibonacci overlay.
 */
function processImage(originalImg, color = 'rgba(255, 255, 0, 0.7)', lineWidth = 2, startCorner = 'top-left') {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    const w = originalImg.width;
    const h = originalImg.height;

    canvas.width = w;
    canvas.height = h;

    // 1. Draw the original image onto the canvas.
    ctx.drawImage(originalImg, 0, 0);

    // 2. Save the context state before applying transformations for the overlay.
    ctx.save();

    // 3. Set the visual style for the overlay lines and spiral.
    ctx.strokeStyle = color;
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';

    // 4. Apply transformations based on the startCorner parameter. This clever trick
    // allows us to write the drawing logic for only one orientation ('top-left')
    // and have it automatically work for all four corners.
    switch (startCorner) {
        case 'top-right':
            ctx.translate(w, 0);
            ctx.scale(-1, 1);
            break;
        case 'bottom-left':
            ctx.translate(0, h);
            ctx.scale(1, -1);
            break;
        case 'bottom-right':
            ctx.translate(w, h);
            ctx.scale(-1, -1);
            break;
        case 'top-left':
        default:
            // The default 'top-left' requires no transformation.
            break;
    }

    // 5. Draw the Fibonacci spiral and its bounding boxes.
    ctx.beginPath();

    let x = 0, y = 0, width = w, height = h;

    // The drawing logic follows a clockwise sequence of carving squares: Left, Bottom, Right, Top.
    // If the image is portrait, we start the sequence at the 'Bottom' carve (turn 1)
    // to ensure the first square correctly uses the image's width as its side.
    const turnOffset = (width < height) ? 1 : 0;

    // We loop a fixed number of times, which is more than enough for any practical image resolution.
    for (let i = 0; i < 16; i++) {
        // Stop if the remaining rectangle is too small to be visible.
        if (width < 0.5 || height < 0.5) break;

        const turn = (i + turnOffset) % 4;
        let squareSide;

        // Each 'turn' carves out the largest possible square from the current rectangle,
        // draws the dividing line, and adds the corresponding arc of the spiral.
        switch (turn) {
            case 0: // Carve a square from the Left side
                squareSide = height;
                ctx.moveTo(x + squareSide, y);
                ctx.lineTo(x + squareSide, y + height);
                ctx.arc(x + squareSide, y + height, squareSide, Math.PI, 1.5 * Math.PI);
                x += squareSide;
                width -= squareSide;
                break;

            case 1: // Carve a square from the Bottom side
                squareSide = width;
                ctx.moveTo(x, y + height - squareSide);
                ctx.lineTo(x + width, y + height - squareSide);
                ctx.arc(x, y + height - squareSide, squareSide, 0, 0.5 * Math.PI);
                height -= squareSide;
                break;

            case 2: // Carve a square from the Right side
                squareSide = height;
                ctx.moveTo(x + width - squareSide, y);
                ctx.lineTo(x + width - squareSide, y + height);
                ctx.arc(x + width - squareSide, y, squareSide, 0.5 * Math.PI, Math.PI);
                width -= squareSide;
                break;

            case 3: // Carve a square from the Top side
                squareSide = width;
                ctx.moveTo(x, y + squareSide);
                ctx.lineTo(x + width, y + squareSide);
                ctx.arc(x + width, y + squareSide, squareSide, 1.5 * Math.PI, 2 * Math.PI);
                y += squareSide;
                height -= squareSide;
                break;
        }
    }

    // 6. All lines and arcs have been added to the path, now render them.
    ctx.stroke();

    // 7. Restore the context to its original state (removing transformations).
    ctx.restore();

    return canvas;
}