Image Vinyl Record Sleeve Template Creator

function processImage(originalImg, recordVisibleAmount = 50, recordColor = "black", labelColor = "ivory", openingSide = "right") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    const sleeveArtWidth = originalImg.width;
    const sleeveArtHeight = originalImg.height;

    // Ensure recordVisibleAmount is not negative
    recordVisibleAmount = Math.max(0, Number(recordVisibleAmount));
    recordColor = String(recordColor);
    labelColor = String(labelColor);
    openingSide = String(openingSide).toLowerCase();

    // 1. Calculate record properties
    // Record diameter is based on the shorter side of the sleeve art, slightly smaller (e.g., 98%).
    const actualRecordDiameter = Math.min(sleeveArtWidth, sleeveArtHeight) * 0.98;
    const R = actualRecordDiameter / 2; // R is actualRecordRadius
    // Label is typically about 30-40% of record radius. Using 35%.
    const actualLabelRadius = R * 0.35; 

    // 2. Determine canvas dimensions and sleeve drawing position (top-left corner of sleeve on canvas)
    let canvasWidth = sleeveArtWidth;
    let canvasHeight = sleeveArtHeight;
    let sleeveDrawX = 0;
    let sleeveDrawY = 0;

    switch (openingSide) {
        case "left":
            canvasWidth += recordVisibleAmount;
            sleeveDrawX = recordVisibleAmount; // Sleeve is shifted to the right
            break;
        case "top":
            canvasHeight += recordVisibleAmount;
            sleeveDrawY = recordVisibleAmount; // Sleeve is shifted down
            break;
        case "bottom":
            canvasHeight += recordVisibleAmount;
            // sleeveDrawY remains 0 (sleeve at top), record peeks from bottom
            break;
        case "right":
            // This is a valid case, will be handled by default
            break;
        default:  // Default to "right" if invalid side or not specified
            openingSide = "right"; // Standardize for unambiguous use in rcx/rcy calculation
            // canvasWidth calculation for "right" will happen below if it falls through
            break;
    }

    // Ensure "right" (including default) gets its canvas width adjustment if not handled above.
    if (openingSide === "right" && canvasWidth === sleeveArtWidth) {
         canvasWidth += recordVisibleAmount;
         // sleeveDrawX remains 0
    }


    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    
    // 3. Calculate record drawing center (rcx, rcy) on the canvas
    // This determines where the center of the record disc (vinyl + label) is drawn.
    let rcx, rcy;

    switch (openingSide) {
        case "left":
            // Record's left edge is at canvas x=0. Its center is R pixels from the left edge.
            rcx = R;
            // Record is vertically centered with the sleeve's drawing area.
            rcy = sleeveDrawY + (sleeveArtHeight / 2);
            break;
        case "top":
            // Record is horizontally centered with the sleeve's drawing area.
            rcx = sleeveDrawX + (sleeveArtWidth / 2);
            // Record's top edge is at canvas y=0. Its center is R pixels from the top edge.
            rcy = R;
            break;
        case "bottom":
            // Record is horizontally centered with the sleeve's drawing area.
            rcx = sleeveDrawX + (sleeveArtWidth / 2);
            // Sleeve's bottom edge on canvas is at sleeveDrawY + sleeveArtHeight.
            // Record's bottom edge is 'recordVisibleAmount' below that.
            // So, record's bottom edge is at (sleeveDrawY + sleeveArtHeight + recordVisibleAmount).
            // Record's center y is R pixels above its bottom edge.
            rcy = (sleeveDrawY + sleeveArtHeight + recordVisibleAmount) - R;
            break;
        case "right": // Fall-through from above or explicit
        default: // Default handling for "right"
            // Sleeve's right edge on canvas is at sleeveDrawX + sleeveArtWidth.
            // Record's right edge is 'recordVisibleAmount' beyond that.
            // So, record's right edge is at (sleeveDrawX + sleeveArtWidth + recordVisibleAmount).
            // Record's center x is R pixels to the left of its right edge.
            rcx = (sleeveDrawX + sleeveArtWidth + recordVisibleAmount) - R;
            // Record is vertically centered with the sleeve's drawing area.
            rcy = sleeveDrawY + (sleeveArtHeight / 2);
            break;
    }

    // 4. Draw elements
    // Drawing order: record first, then sleeve on top.

    // Draw vinyl record disc (if it's supposed to be visible)
    if (recordVisibleAmount > 0 && R > 0) {
        ctx.fillStyle = recordColor;
        ctx.beginPath();
        ctx.arc(rcx, rcy, R, 0, 2 * Math.PI);
        ctx.fill();

        // Draw record label (if record radius is large enough for a label)
        if (actualLabelRadius > 0) {
            ctx.fillStyle = labelColor;
            ctx.beginPath();
            ctx.arc(rcx, rcy, actualLabelRadius, 0, 2 * Math.PI);
            ctx.fill();
        }
    }
    
    // Draw the sleeve art (originalImg)
    ctx.drawImage(originalImg, sleeveDrawX, sleeveDrawY, sleeveArtWidth, sleeveArtHeight);
    
    return canvas;
}