Image Number One Generator

function processImage(originalImg, text = "1", caption = "Один", style = "badge", position = "bottom-right", themeColor = "#FFD700") {
    // Create canvas to process the image
    const canvas = document.createElement('canvas');
    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;
    const ctx = canvas.getContext('2d');

    const styleMode = style.toLowerCase();

    if (styleMode === 'mask') {
        // Mode 1: Mask the original image into the shape of the number "1"
        const maxDim = Math.min(width, height);
        
        ctx.fillStyle = 'black';
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        // Use an impact-style thick font for the most expansive masking area
        ctx.font = `bold ${maxDim * 0.9}px Impact, "Arial Black", sans-serif`;
        
        // Draw main number
        ctx.fillText(text, width / 2, height / 2.1);

        // Draw caption text if present
        if (caption) {
            ctx.font = `bold ${maxDim * 0.15}px Impact, "Arial Black", sans-serif`;
            ctx.fillText(caption, width / 2, height * 0.9);
        }

        // Masking composite operation: Only keeps parts of the original image that overlap with the text
        ctx.globalCompositeOperation = 'source-in';
        ctx.drawImage(originalImg, 0, 0, width, height);

        // Reset composite operation so further drawing acts normal
        ctx.globalCompositeOperation = 'source-over';
    } else {
        // For other modes, act as an overlay: draw the original image over the canvas first
        ctx.drawImage(originalImg, 0, 0, width, height);

        if (styleMode === 'watermark') {
            // Mode 2: Center a large, translucent number and caption over the image
            const maxDim = Math.min(width, height);
            
            ctx.save();
            ctx.translate(width / 2, height / 2);
            
            // Add a drop shadow to ensure legibility on both light and dark images
            ctx.shadowColor = 'black';
            ctx.shadowBlur = maxDim * 0.05;
            ctx.shadowOffsetX = maxDim * 0.01;
            ctx.shadowOffsetY = maxDim * 0.01;
            
            ctx.fillStyle = themeColor;
            ctx.globalAlpha = 0.65;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            
            ctx.font = `bold ${maxDim * 0.8}px Impact, "Arial Black", sans-serif`;
            ctx.fillText(text, 0, -maxDim * 0.05);

            ctx.font = `bold ${maxDim * 0.15}px Impact, "Arial Black", sans-serif`;
            ctx.fillText(caption, 0, maxDim * 0.35);
            ctx.restore();
        } else {
            // Mode 3 (Default): Draw a "Number One" award badge/stamp on the given position
            const size = Math.min(width, height) * 0.35; // Size scales relatively (35% of shortest side)
            let badgeX = 0, badgeY = 0;
            const padding = size * 0.65;

            switch (position.toLowerCase()) {
                case 'top-left': 
                    badgeX = padding; badgeY = padding; 
                    break;
                case 'top-right': 
                    badgeX = width - padding; badgeY = padding; 
                    break;
                case 'bottom-left': 
                    badgeX = padding; badgeY = height - padding; 
                    break;
                case 'center': 
                    badgeX = width / 2; badgeY = height / 2; 
                    break;
                case 'bottom-right':
                default: 
                    badgeX = width - padding; badgeY = height - padding; 
                    break;
            }

            ctx.save();
            ctx.translate(badgeX, badgeY);

            // Add drop shadow behind the seal for a 3D pop effect
            ctx.shadowColor = 'rgba(0, 0, 0, 0.65)';
            ctx.shadowBlur = size * 0.12;
            ctx.shadowOffsetX = size * 0.04;
            ctx.shadowOffsetY = size * 0.04;

            // Render background starburst shield geometry
            const spikes = 20;
            const outerRadius = size / 2;
            const innerRadius = size * 0.42;
            let rot = (Math.PI / 2) * 3;
            const step = Math.PI / spikes;

            ctx.beginPath();
            ctx.moveTo(0, -outerRadius);
            for (let i = 0; i < spikes; i++) {
                ctx.lineTo(Math.cos(rot) * outerRadius, Math.sin(rot) * outerRadius);
                rot += step;
                ctx.lineTo(Math.cos(rot) * innerRadius, Math.sin(rot) * innerRadius);
                rot += step;
            }
            ctx.closePath();
            ctx.fillStyle = themeColor;
            ctx.fill();

            // Disable shadow for internal flat badge components
            ctx.shadowColor = 'transparent'; 
            
            // Inner white circular backdrop
            ctx.beginPath();
            ctx.arc(0, 0, size * 0.36, 0, Math.PI * 2);
            ctx.fillStyle = '#ffffff';
            ctx.fill();

            // Inner colored decorative ring
            ctx.beginPath();
            ctx.arc(0, 0, size * 0.31, 0, Math.PI * 2);
            ctx.strokeStyle = themeColor;
            ctx.lineWidth = size * 0.015;
            ctx.stroke();

            // Write the primary large numbering text
            ctx.fillStyle = themeColor;
            ctx.textAlign = 'center';
            ctx.textBaseline = 'middle';
            ctx.font = `bold ${size * 0.37}px Impact, "Arial Black", sans-serif`;
            ctx.fillText(text, 0, -size * 0.06);

            // Write the supporting caption under the number
            ctx.font = `bold ${size * 0.09}px Arial, sans-serif`;
            ctx.fillText(caption.toUpperCase(), 0, size * 0.2);

            ctx.restore();
        }
    }

    return canvas;
}