Image To Calendar Converter

function processImage(
    originalImg, 
    year = new Date().getFullYear(), 
    month = new Date().getMonth() + 1, 
    bgColor = "#ffffff", 
    textColor = "#333333", 
    accentColor = "#e74c3c"
) {
    // Parse parameters
    const y = Number(year);
    const m = Number(month); // 1 to 12

    // Dimensions and layout calculations
    const CAL_WIDTH = 1080;
    const IMG_HEIGHT = originalImg.height * (CAL_WIDTH / originalImg.width);
    
    // Calendar date logic
    const startDay = new Date(y, m - 1, 1).getDay(); // 0 (Sun) to 6 (Sat)
    const daysInMonth = new Date(y, m, 0).getDate(); // e.g. 28, 30, 31
    const numRows = Math.ceil((startDay + daysInMonth) / 7);
    
    // Layout positions
    const BAR_HEIGHT = 15;
    const TITLE_Y = IMG_HEIGHT + BAR_HEIGHT + 90;
    const WEEKDAYS_Y = IMG_HEIGHT + BAR_HEIGHT + 190;
    const GRID_TOP = IMG_HEIGHT + BAR_HEIGHT + 230;
    const CELL_HEIGHT = 120;
    const CELL_WIDTH = CAL_WIDTH / 7;
    const BOTTOM_PADDING = 50;

    // Create Canvas
    const canvas = document.createElement('canvas');
    canvas.width = CAL_WIDTH;
    canvas.height = GRID_TOP + (numRows * CELL_HEIGHT) + BOTTOM_PADDING;
    const ctx = canvas.getContext('2d');

    // 1. Draw Image
    ctx.drawImage(originalImg, 0, 0, CAL_WIDTH, IMG_HEIGHT);

    // 2. Draw Separator Bar
    ctx.fillStyle = accentColor;
    ctx.fillRect(0, IMG_HEIGHT, CAL_WIDTH, BAR_HEIGHT);

    // 3. Draw Calendar Background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, IMG_HEIGHT + BAR_HEIGHT, CAL_WIDTH, canvas.height - IMG_HEIGHT - BAR_HEIGHT);

    // 4. Draw Title (Month and Year)
    const dateObj = new Date(y, m - 1, 1);
    const monthName = dateObj.toLocaleString('default', { month: 'long' });
    const titleText = `${monthName} ${y}`.toUpperCase();

    ctx.fillStyle = textColor;
    ctx.font = 'bold 70px "Segoe UI", Arial, sans-serif';
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText(titleText, CAL_WIDTH / 2, TITLE_Y);

    // 5. Draw Weekdays
    const daysArr = ['SUN', 'MON', 'TUE', 'WED', 'THU', 'FRI', 'SAT'];
    ctx.font = 'bold 28px "Segoe UI", Arial, sans-serif';
    for (let i = 0; i < 7; i++) {
        // Weekends styled with accent color
        ctx.fillStyle = (i === 0 || i === 6) ? accentColor : textColor;
        ctx.fillText(daysArr[i], i * CELL_WIDTH + (CELL_WIDTH / 2), WEEKDAYS_Y);
    }

    // 6. Draw Grid Lines
    ctx.strokeStyle = textColor;
    ctx.lineWidth = 2;
    ctx.globalAlpha = 0.15; // Set transparency for subtle lines
    
    ctx.beginPath();
    // Horizontal lines
    for (let r = 0; r <= numRows; r++) {
        const yLine = GRID_TOP + r * CELL_HEIGHT;
        ctx.moveTo(0, yLine);
        ctx.lineTo(CAL_WIDTH, yLine);
    }
    // Vertical lines
    for (let c = 0; c <= 7; c++) {
        const xLine = c * CELL_WIDTH;
        ctx.moveTo(xLine, GRID_TOP);
        ctx.lineTo(xLine, GRID_TOP + numRows * CELL_HEIGHT);
    }
    ctx.stroke();
    ctx.globalAlpha = 1.0; // Reset transparency

    // 7. Draw Days (Numbers)
    ctx.font = 'bold 36px "Segoe UI", Arial, sans-serif';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    
    let row = 0;
    let col = startDay;
    for (let day = 1; day <= daysInMonth; day++) {
        ctx.fillStyle = (col === 0 || col === 6) ? accentColor : textColor;
        
        const xText = col * CELL_WIDTH + 15;
        const yText = GRID_TOP + (row * CELL_HEIGHT) + 15;
        ctx.fillText(day.toString(), xText, yText);

        col++;
        if (col > 6) {
            col = 0;
            row++;
        }
    }

    return canvas;
}