Bill Pay Slip Image Generator

function processImage(
    originalImg,
    payeeName = "Global Utilities Corp.",
    customerName = "John Q. Public",
    accountNumber = "100-555-9876",
    dueDate = "2024-12-31",
    amountDue = "$142.50",
    referenceNumber = "4815162342-108"
) {
    // Create an appropriately sized canvas for a remittance slip
    const canvas = document.createElement('canvas');
    canvas.width = 850;
    canvas.height = 350;
    const ctx = canvas.getContext('2d');

    // Fill white background
    ctx.fillStyle = '#FFFFFF';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Draw an outer border
    ctx.strokeStyle = '#CCCCCC';
    ctx.lineWidth = 1;
    ctx.strokeRect(0, 0, canvas.width, canvas.height);

    // Draw tear line (dotted)
    ctx.setLineDash([5, 5]);
    ctx.strokeStyle = '#888888';
    ctx.beginPath();
    ctx.moveTo(20, 25);
    ctx.lineTo(canvas.width - 20, 25);
    ctx.stroke();
    
    // Draw tear instructions
    ctx.setLineDash([]);
    ctx.fillStyle = '#888888';
    ctx.font = 'italic 11px Arial, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    // Covering a slight whitespace over the dotted line for the text
    ctx.clearRect(canvas.width / 2 - 190, 15, 380, 20);
    ctx.fillText("Please fold, tear along dotted line, and return this portion with your payment", canvas.width / 2, 25);

    // Draw a prominent header block accent line
    ctx.fillStyle = '#4A6984'; // Professional slate blue
    ctx.fillRect(30, 45, canvas.width - 60, 5);

    // Draw Logo (originalImg)
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    if (originalImg && originalImg.width > 0 && originalImg.height > 0) {
        let logoMaxW = 160;
        let logoMaxH = 50;
        // Keep aspect ratio
        let ratio = Math.min(logoMaxW / originalImg.width, logoMaxH / originalImg.height);
        let logoW = originalImg.width * ratio;
        let logoH = originalImg.height * ratio;
        // Center the scaled logo vertically in the 50px area
        let logoY = 60 + (50 - logoH) / 2;
        ctx.drawImage(originalImg, 30, logoY, logoW, logoH);
    } else {
        // Fallback box for payee logo
        ctx.fillStyle = '#DDDDDD';
        ctx.fillRect(30, 60, 100, 40);
        ctx.fillStyle = '#555';
        ctx.font = 'bold 14px Arial, sans-serif';
        ctx.fillText("LOGO", 60, 71);
    }

    // Slip Title & Payee Name
    ctx.textAlign = 'right';
    ctx.fillStyle = '#222222';
    ctx.font = 'bold 22px Arial, sans-serif';
    ctx.fillText("PAYMENT REMITTANCE SLIP", canvas.width - 30, 60);
    
    ctx.font = '14px Arial, sans-serif';
    ctx.fillStyle = '#555555';
    ctx.fillText(String(payeeName), canvas.width - 30, 90);

    // Helper sub-function to draw a generic slip box field
    function drawBox(x, y, w, h, title, value) {
        // Box background fill
        ctx.fillStyle = '#F8F9FA';
        ctx.fillRect(x, y, w, h);
        
        // Box outline
        ctx.strokeStyle = '#DDDDDD';
        ctx.lineWidth = 1;
        ctx.strokeRect(x, y, w, h);

        // Box Label
        ctx.fillStyle = '#777777';
        ctx.font = 'bold 10px Arial, sans-serif';
        ctx.textAlign = 'left';
        ctx.fillText(title.toUpperCase(), x + 10, y + 8);

        // Box Value
        ctx.fillStyle = '#000000';
        ctx.font = 'bold 16px Arial, sans-serif';
        // Special styling for the amount field
        if (title.toLowerCase().includes("amount")) {
            ctx.font = 'bold 24px Arial, sans-serif';
            ctx.fillStyle = '#C9302C'; // Standout red color for payment
        }
        
        ctx.fillText(value, x + 10, y + h / 2 + (title.toLowerCase().includes("amount") ? -4 : 0));
    }

    // Draw Data Boxes
    let boxY = 130;
    let boxH = 65;
    drawBox(30, boxY, 280, boxH, "Customer Name", String(customerName));
    drawBox(330, boxY, 220, boxH, "Account Number", String(accountNumber));
    drawBox(570, boxY, 250, boxH, `Amount Due By ${String(dueDate)}`, String(amountDue));

    // Additional Forms Elements
    let enclosedX = 570;
    let enclosedY = 215;
    
    // Address change check
    ctx.strokeRect(enclosedX, enclosedY, 12, 12);
    ctx.fillStyle = '#555555';
    ctx.font = '12px Arial, sans-serif';
    ctx.textAlign = 'left';
    ctx.fillText("Check here if address has changed", enclosedX + 20, enclosedY);

    // Write-in field for manually written amount enclosed
    ctx.fillText("Amount Enclosed: $", enclosedX, enclosedY + 30);
    ctx.beginPath();
    ctx.moveTo(enclosedX + 115, enclosedY + 45);
    ctx.lineTo(enclosedX + 250, enclosedY + 45);
    ctx.stroke();

    // Barcode Simulation logic based on Reference Number
    let bcX = 30;
    let bcY = 220;
    let bcW = 400;
    let bcH = 40;
    
    ctx.fillStyle = '#222222';
    let currentX = bcX;
    let refStr = String(referenceNumber);
    let idx = 0;
    
    // Procedurally generate a barcode design via hashing chars
    while(currentX < bcX + bcW) {
        let charVal = refStr.charCodeAt(idx % refStr.length) || 65;
        let weighted = charVal * (idx + 1) * 7;
        let lineWidth = (weighted % 3) + 1; // Between 1 and 3 px
        let space = ((weighted >> 2) % 3) + 1.5; // Between 1.5 and 3.5 px
        
        if (currentX + lineWidth <= bcX + bcW) {
             ctx.fillRect(currentX, bcY, lineWidth, bcH);
        }
        currentX += lineWidth + space;
        idx++;
    }

    // Print reference number string beneath the generated barcode
    ctx.textAlign = 'left';
    ctx.font = '13px "Courier New", Courier, monospace';
    ctx.fillStyle = '#555555';
    let spacedRef = refStr.split('').join(' ');
    ctx.fillText(spacedRef, bcX, bcY + bcH + 5);

    // Bottom Footer
    ctx.textAlign = 'center';
    ctx.font = '11px Arial, sans-serif';
    ctx.fillStyle = '#999999';
    ctx.fillText(`Make checks payable to: ${String(payeeName)}  |  Include your account number on your check.`, canvas.width / 2, 320);

    return canvas;
}