Image Golden Ratio Overlay Adder

async function processImage(originalImg, orientation = 'TopLeft', lineColor = 'rgba(255, 255, 255, 0.8)', lineWidth = 2) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;
    canvas.width = width;
    canvas.height = height;

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

    ctx.strokeStyle = lineColor;
    ctx.lineWidth = Number(lineWidth) || 2;

    let curX = 0;
    let curY = 0;
    let curW = width;
    let curH = height;

    ctx.beginPath();

    // The logic will draw a clockwise spiral. The orientation parameter determines
    // which corner the spiral converges towards.
    for (let i = 0; i < 15; i++) {
        if (curW < 1 || curH < 1) {
            break;
        }

        let squareSize, arcX, arcY, radius, startAngle, endAngle;

        // Determine the split and arc based on the current rectangle's aspect ratio
        if (curW >= curH) { // Landscape or square rectangle
            squareSize = radius = curH;

            switch (orientation) {
                case 'TopRight':
                case 'BottomRight':
                    // Split from the right side
                    ctx.moveTo(curX + curW - squareSize, curY);
                    ctx.lineTo(curX + curW - squareSize, curY + curH);

                    if (orientation === 'TopRight') {
                        // Arc in the top-left corner of the square
                        arcX = curX + curW - squareSize;
                        arcY = curY;
                        startAngle = 0.5 * Math.PI;
                        endAngle = Math.PI;
                    } else { // BottomRight
                        // Arc in the bottom-left corner of the square
                        arcX = curX + curW - squareSize;
                        arcY = curY + squareSize;
                        startAngle = Math.PI;
                        endAngle = 1.5 * Math.PI;
                    }
                    curW -= squareSize;
                    break;

                case 'TopLeft':
                case 'BottomLeft':
                default:
                    // Split from the left side
                    ctx.moveTo(curX + squareSize, curY);
                    ctx.lineTo(curX + squareSize, curY + curH);

                    if (orientation === 'TopLeft') {
                        // Arc in the bottom-right corner of the square
                        arcX = curX + squareSize;
                        arcY = curY + squareSize;
                        startAngle = Math.PI;
                        endAngle = 1.5 * Math.PI;
                    } else { // BottomLeft
                        // Arc in the top-right corner of the square
                        arcX = curX + squareSize;
                        arcY = curY;
                        startAngle = 1.5 * Math.PI;
                        endAngle = 2 * Math.PI;
                    }
                    curX += squareSize;
                    curW -= squareSize;
                    break;
            }
        } else { // Portrait rectangle
            squareSize = radius = curW;

            switch (orientation) {
                case 'BottomLeft':
                case 'BottomRight':
                    // Split from the bottom
                    ctx.moveTo(curX, curY + curH - squareSize);
                    ctx.lineTo(curX + curW, curY + curH - squareSize);

                    if (orientation === 'BottomRight') {
                        // Arc in the top-left corner of the square
                        arcX = curX;
                        arcY = curY + curH - squareSize;
                        startAngle = 0.5 * Math.PI;
                        endAngle = Math.PI;
                    } else { // BottomLeft
                        // Arc in the top-right corner of the square
                        arcX = curX + squareSize;
                        arcY = curY + curH - squareSize;
                        startAngle = 0;
                        endAngle = 0.5 * Math.PI;
                    }
                    curH -= squareSize;
                    break;

                case 'TopLeft':
                case 'TopRight':
                default:
                    // Split from the top
                    ctx.moveTo(curX, curY + squareSize);
                    ctx.lineTo(curX + curW, curY + squareSize);
                    
                    if (orientation === 'TopLeft') {
                        // Arc in the bottom-left corner of the square
                        arcX = curX;
                        arcY = curY + squareSize;
                        startAngle = 1.5 * Math.PI;
                        endAngle = 2 * Math.PI;
                    } else { // TopRight
                        // Arc in the bottom-right corner of the square
                        arcX = curX + squareSize;
                        arcY = curY + squareSize;
                        startAngle = Math.PI;
                        endAngle = 1.5 * Math.PI;
                    }
                    curY += squareSize;
                    curH -= squareSize;
                    break;
            }
        }
        
        if (radius > 0) {
            ctx.arc(arcX, arcY, radius, startAngle, endAngle);
        }
    }

    ctx.stroke();
    return canvas;
}