Image Text Overlay Generator

function processImage(originalImg,
    text = "Hello World",
    fontSize = 30,
    fontFamily = "Arial",
    textColor = "black",
    x = 10,
    y = 10,
    textAlign = "left",
    textBaseline = "top",
    strokeColor = "black", // Default stroke color if stroke is enabled
    strokeWidth = 0) {    // Default stroke width (0 means no stroke)

    // 1. Create a new canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set canvas dimensions to match the original image
    // Use naturalWidth/Height for intrinsic dimensions, fallback to width/height.
    // This assumes originalImg is a loaded HTMLImageElement or compatible (e.g., another canvas).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    canvas.width = imgWidth;
    canvas.height = imgHeight;

    // 3. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0, imgWidth, imgHeight);

    // 4. Configure text properties
    // The font shorthand property: "font-style font-variant font-weight font-size/line-height font-family"
    // We are setting font-size and font-family. Others will use canvas defaults.
    ctx.font = `${fontSize}px ${fontFamily}`;
    ctx.fillStyle = textColor; // Color for filling the text
    ctx.textAlign = textAlign; // Alignment of text (e.g., "left", "center", "right")
    ctx.textBaseline = textBaseline; // Baseline of text (e.g., "top", "middle", "bottom")

    // 5. Draw the text stroke (outline) if specified
    // strokeWidth must be positive, and strokeColor should be meaningful.
    if (strokeWidth > 0) {
        ctx.strokeStyle = strokeColor; // Color for the text stroke
        ctx.lineWidth = strokeWidth;   // Width of the text stroke
        ctx.strokeText(text, x, y);    // Draw the text outline
    }

    // 6. Draw the filled text
    // This is drawn on top of the stroke if both are applied, which is common.
    ctx.fillText(text, x, y); // Draw the filled text

    // 7. Return the canvas element
    return canvas;
}