Image Watermark Text Adder

function processImage(originalImg, text = "Watermark", font = "Arial", fontSize = 30, color = "#000000", opacity = 0.5, positionX = 50, positionY = 50, rotation = 0) {
    // Create a new canvas element
    const canvas = document.createElement('canvas');

    // Determine the dimensions of the image.
    // Use naturalWidth/naturalHeight for HTMLImageElement to get original dimensions.
    // Fallback to width/height for other cases (e.g., if originalImg is another canvas).
    const imgWidth = originalImg.naturalWidth || originalImg.width;
    const imgHeight = originalImg.naturalHeight || originalImg.height;

    // Ensure dimensions are valid. If image hasn't loaded or is invalid,
    // width/height might be 0.
    if (imgWidth === 0 || imgHeight === 0) {
        console.error("Image has zero dimensions. Ensure it is loaded and valid before processing.");
        // Return a minimal canvas to adhere to return type requirement.
        // Caller should check canvas dimensions if this is a concern.
        canvas.width = 1;
        canvas.height = 1; 
        const errCtx = canvas.getContext('2d');
        if (errCtx) {
            errCtx.font = "1px Arial"; // Minimal text
             // Attempt to draw a tiny indicator, may not be visible.
            errCtx.fillText("!", 0, 1);
        }
        return canvas;
    }

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

    // Get the 2D rendering context
    const ctx = canvas.getContext('2d');

    // If context cannot be obtained (highly unlikely for '2d' but good practice to check)
    if (!ctx) {
        console.error("Could not get 2D rendering context from canvas.");
        // Return the canvas (it will be blank but has correct dimensions)
        return canvas;
    }

    // Draw the original image onto the canvas
    // The image is drawn at its determined width and height, filling the canvas.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Save the current canvas state (includes transformations, styles, globalAlpha, etc.)
    // This allows us to make changes for text drawing and then easily revert them.
    ctx.save();

    // Configure text properties
    // Ensure fontSize and opacity are treated as numbers and clamped if necessary.
    const finalFontSize = Number(fontSize) || 30;
    const finalOpacity = Math.max(0, Math.min(1, Number(opacity) || 0.5));

    ctx.font = `${finalFontSize}px ${font}`;
    ctx.fillStyle = color;
    ctx.globalAlpha = finalOpacity;
    
    // Align text center horizontally and middle vertically relative to the drawing point
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";

    // Calculate the actual x and y coordinates for the text center
    // positionX and positionY are given as percentages of the canvas dimensions.
    const x = canvas.width * (Number(positionX) / 100);
    const y = canvas.height * (Number(positionY) / 100);

    // Apply transformations:
    // 1. Translate the canvas origin to the calculated (x, y) position.
    ctx.translate(x, y);
    // 2. Rotate the canvas around the new origin (the text center).
    // The rotation angle is converted from degrees to radians.
    ctx.rotate((Number(rotation) || 0) * Math.PI / 180);

    // Draw the watermark text. Since origin is translated and rotated,
    // and textAlign/textBaseline are center/middle, draw at (0,0).
    ctx.fillText(text, 0, 0);

    // Restore the canvas state to what it was before ctx.save()
    // This undoes the translation, rotation, globalAlpha, fillStyle, font changes, etc.
    ctx.restore();

    // Return the canvas element with the image and watermark
    return canvas;
}