Image CAD-Style Golden Rectangle Stencil Generator

/**
 * Generates a printable CAD-style stencil of the Golden Rectangle.
 * The stencil includes construction squares and the inscribed golden spiral.
 * The output is sized for a physical dimension of 78 mm x 48.2 mm with a 2 mm stroke weight.
 *
 * @param {Image} originalImg - This parameter is ignored as the function generates a specific graphic.
 * @returns {HTMLCanvasElement} A canvas element containing the stencil drawing.
 */
function processImage(originalImg) {
    // --- Configuration ---
    // Physical dimensions as per the description
    const mmWidth = 78;
    const mmHeight = 48.2; // Note: 78 / 1.618034 (phi) ≈ 48.2
    const mmStroke = 2;

    // A common resolution for printing is 300 DPI (dots per inch)
    const DPI = 300;
    const MM_PER_INCH = 25.4;

    // Convert millimeters to pixels
    const pxWidth = Math.round((mmWidth / MM_PER_INCH) * DPI);
    const pxHeight = Math.round((mmHeight / MM_PER_INCH) * DPI);
    const pxStroke = (mmStroke / MM_PER_INCH) * DPI;

    // --- Canvas Setup ---
    const canvas = document.createElement('canvas');
    canvas.width = pxWidth;
    canvas.height = pxHeight;
    const ctx = canvas.getContext('2d');

    // Style for a "CAD" look
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = pxStroke;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // Draw the main outer rectangle
    ctx.strokeRect(0, 0, canvas.width, canvas.height);

    // --- Generation Logic ---
    let rect = {
        x: 0,
        y: 0,
        w: canvas.width,
        h: canvas.height
    };

    // The sequence of placing squares to form a counter-clockwise inward spiral
    const placementOrder = ['LEFT', 'TOP', 'RIGHT', 'BOTTOM'];
    const PI = Math.PI;

    // Generate and draw squares and spiral arcs
    for (let i = 0; i < 15; i++) {
        if (rect.w < 1 || rect.h < 1) break;

        const placement = placementOrder[i % 4];
        let sq, arcCenter, startAngle;

        if (rect.w >= rect.h) { // Landscape rectangle
            const size = rect.h;
            if (placement === 'LEFT') {
                sq = { x: rect.x, y: rect.y, size: size };
                rect.x += size;
                rect.w -= size;
                arcCenter = { x: sq.x + size, y: sq.y + size };
                startAngle = PI;
            } else { // RIGHT
                sq = { x: rect.x + rect.w - size, y: rect.y, size: size };
                rect.w -= size;
                arcCenter = { x: sq.x, y: sq.y };
                startAngle = 0;
            }
        } else { // Portrait rectangle
            const size = rect.w;
            if (placement === 'TOP') {
                sq = { x: rect.x, y: rect.y, size: size };
                rect.y += size;
                rect.h -= size;
                arcCenter = { x: sq.x, y: sq.y + size };
                startAngle = 1.5 * PI;
            } else { // BOTTOM
                sq = { x: rect.x, y: rect.y + rect.h - size, size: size };
                rect.h -= size;
                arcCenter = { x: sq.x + size, y: sq.y };
                startAngle = 0.5 * PI;
            }
        }
        
        if(sq && sq.size > pxStroke) {
            // Draw the construction square
            ctx.strokeRect(sq.x, sq.y, sq.size, sq.size);
    
            // Draw the spiral arc within the square
            ctx.beginPath();
            ctx.arc(arcCenter.x, arcCenter.y, sq.size, startAngle, startAngle + 0.5 * PI);
            ctx.stroke();
        }
    }

    return canvas;
}