Image Poster Maker

function processImage(
    originalImg,
    text = "YOUR TEXT HERE\nADD MORE LINES",
    textColor = "#FFFFFF",
    fontFamily = "Impact, 'Arial Black', sans-serif",
    fontSize = 48, // in pixels
    fontWeight = "normal", // e.g., 'normal', 'bold', '700'
    canvasTextAlign = "center", // 'left', 'center', 'right', 'start', 'end'
    canvasTextBaseline = "middle", // 'top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom'
    textXPercent = 50, // Horizontal anchor for text (depends on textAlign) as % of canvas width
    textYPercent = 85, // Vertical anchor for the first line's baseline (depends on textBaseline) as % of canvas height
    imageOverlayColor = "rgba(0,0,0,0.4)", // CSS color string, or "" for no overlay
    textStrokeColor = "#000000", // CSS color string for text stroke
    textStrokeWidth = 2, // Width of text stroke in pixels; 0 for no stroke
    lineHeightFactor = 1.2 // Multiplier for font size to get line height (e.g., 1.2 for 120% line height)
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Check if the image is loaded and has valid dimensions
    if (!originalImg || !originalImg.complete || originalImg.naturalWidth === 0 || originalImg.naturalHeight === 0) {
        console.error("Image not fully loaded or invalid image dimensions. Cannot process.");
        // Create a placeholder canvas indicating the error
        canvas.width = 400;
        canvas.height = 200;
        ctx.fillStyle = "lightgray";
        ctx.fillRect(0, 0, canvas.width, canvas.height);
        ctx.fillStyle = "red";
        ctx.textAlign = "center";
        ctx.textBaseline = "middle";
        ctx.font = "16px Arial";
        ctx.fillText("Error: Image not loaded or invalid.", canvas.width / 2, canvas.height / 2);
        return canvas;
    }

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

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

    // 2. Apply image overlay if specified
    if (typeof imageOverlayColor === 'string' && imageOverlayColor.trim() !== "") {
        ctx.fillStyle = imageOverlayColor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }

    // 3. Set up text properties
    const actualFontSize = Number(fontSize); // Ensure fontSize is a number
    if (isNaN(actualFontSize) || actualFontSize <= 0) {
      console.warn(`Invalid fontSize: ${fontSize}. Defaulting to 48.`);
      // fontSize = 48; // This line would modify the parameter, which might be confusing.
      // Better to use the corrected value directly or handle earlier. For now, let it proceed.
    }
    
    ctx.font = `${fontWeight} ${actualFontSize}px ${fontFamily}`;
    ctx.fillStyle = textColor;
    ctx.textAlign = canvasTextAlign;
    ctx.textBaseline = canvasTextBaseline;

    const currentTextStrokeWidth = Number(textStrokeWidth);
    const applyStroke = currentTextStrokeWidth > 0 && typeof textStrokeColor === 'string' && textStrokeColor.trim() !== "";
    if (applyStroke) {
        ctx.strokeStyle = textStrokeColor;
        ctx.lineWidth = currentTextStrokeWidth;
    }

    // 4. Prepare text lines and positioning
    const lines = String(text).split('\n'); // Ensure text is a string
    const actualLineHeight = actualFontSize * lineHeightFactor;

    // Calculate X and Y coordinates for the first line of text.
    // textXPercent determines the horizontal position based on ctx.textAlign.
    // textYPercent determines the vertical position of the first line's baseline, based on ctx.textBaseline.
    const x = (Number(textXPercent) / 100) * canvas.width;
    const startY = (Number(textYPercent) / 100) * canvas.height;

    // 5. Draw each line of text
    for (let i = 0; i < lines.length; i++) {
        const line = lines[i];
        const currentLineY = startY + (i * actualLineHeight);

        if (applyStroke) {
            ctx.strokeText(line, x, currentLineY);
        }
        ctx.fillText(line, x, currentLineY);
    }

    return canvas;
}