Image Text Creation Tool

function processImage(
    originalImg,
    text = "Your Text\\nHere",
    fontSize = 100,
    fontFamily = "Arial",
    textColor = "#FFFFFF",
    positionPercentX = 50,
    positionPercentY = 50,
    textAlign = "center",
    outlineColor = "#000000",
    outlineWidth = 4,
    isMaskMode = 0
) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;
    
    ctx.font = `bold ${fontSize}px ${fontFamily}, sans-serif`;
    ctx.textAlign = textAlign;
    ctx.textBaseline = "middle";
    
    // Support escaped newlines from string inputs or actual newlines
    const lines = text.split(/\\r\\n|\\n|\r\n|\n/);
    const lineHeight = fontSize * 1.2;
    
    // Calculate the anchor positions based on percentage 
    const x = (positionPercentX / 100) * canvas.width;
    const startY = (positionPercentY / 100) * canvas.height - ((lines.length - 1) * lineHeight) / 2;
    
    if (isMaskMode === 1) {
        // Mode 1: Clip the original image inside the text shapes (Text Masking)
        ctx.fillStyle = "#000000"; // Color does not matter for source-in
        lines.forEach((line, index) => {
            const y = startY + index * lineHeight;
            ctx.fillText(line, x, y);
        });
        
        // Composite the image into the drawn text
        ctx.globalCompositeOperation = 'source-in';
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
        
        // Reset composite operation to draw the outlines normally
        ctx.globalCompositeOperation = 'source-over';
        if (outlineWidth > 0) {
            ctx.strokeStyle = outlineColor;
            ctx.lineWidth = outlineWidth;
            ctx.lineJoin = "round";
            lines.forEach((line, index) => {
                const y = startY + index * lineHeight;
                ctx.strokeText(line, x, y);
            });
        }
    } else {
        // Mode 0: Default image overlaid with styled text
        ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);
        
        lines.forEach((line, index) => {
            const y = startY + index * lineHeight;
            
            // Draw text outline
            if (outlineWidth > 0) {
                ctx.strokeStyle = outlineColor;
                ctx.lineWidth = outlineWidth;
                ctx.lineJoin = "round";
                ctx.strokeText(line, x, y);
            }
            
            // Draw text fill
            ctx.fillStyle = textColor;
            ctx.fillText(line, x, y);
        });
    }
    
    return canvas;
}