Image Duty Status Indicator

function processImage(originalImg, statusText = "ДЕЖУРНАЯ", badgeColor = "#d32f2f", textColor = "#ffffff", position = "bottom-right") {
    // Create canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set canvas dimensions to the original image dimensions
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Draw the original image
    ctx.drawImage(originalImg, 0, 0);

    // Calculate font size based on image width to keep it proportionate
    // Ensure it's legible by enforcing min and max sizes
    let fontSize = Math.max(16, Math.min(150, Math.floor(canvas.width / 15)));
    ctx.font = `bold ${fontSize}px Arial, Helvetica, sans-serif`;

    // Calculate text metrics and badge dimensions
    const textMetrics = ctx.measureText(statusText);
    const textWidth = textMetrics.width;
    const paddingX = fontSize * 0.8;
    const paddingY = fontSize * 0.6;
    
    const badgeWidth = textWidth + paddingX * 2;
    const badgeHeight = fontSize + paddingY * 1.5;

    // Margin from the edges of the image
    const margin = Math.max(10, canvas.width * 0.03);
    
    // Determine the coordinates based on the selected position
    let x = 0;
    let y = 0;

    switch(position.toLowerCase().trim()) {
        case 'top-left':
            x = margin;
            y = margin;
            break;
        case 'top-right':
            x = canvas.width - badgeWidth - margin;
            y = margin;
            break;
        case 'bottom-left':
            x = margin;
            y = canvas.height - badgeHeight - margin;
            break;
        case 'bottom-right':
        default:
            x = canvas.width - badgeWidth - margin;
            y = canvas.height - badgeHeight - margin;
            break;
    }

    // Border radius for the badge
    const radius = Math.min(badgeHeight * 0.2, 20);

    // Set shadow for the badge to make it stand out
    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;

    // Draw the rounded rectangle badge
    ctx.fillStyle = badgeColor;
    ctx.beginPath();
    ctx.moveTo(x + radius, y);
    ctx.lineTo(x + badgeWidth - radius, y);
    ctx.quadraticCurveTo(x + badgeWidth, y, x + badgeWidth, y + radius);
    ctx.lineTo(x + badgeWidth, y + badgeHeight - radius);
    ctx.quadraticCurveTo(x + badgeWidth, y + badgeHeight, x + badgeWidth - radius, y + badgeHeight);
    ctx.lineTo(x + radius, y + badgeHeight);
    ctx.quadraticCurveTo(x, y + badgeHeight, x, y + badgeHeight - radius);
    ctx.lineTo(x, y + radius);
    ctx.quadraticCurveTo(x, y, x + radius, y);
    ctx.closePath();
    ctx.fill();

    // Reset shadow before drawing the text 
    // (so the shadow is only applied to the badge itself)
    ctx.shadowColor = "transparent";
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // Draw the status indicator text
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Place text at the center of the badge
    const textX = x + badgeWidth / 2;
    // slight visual adjustment of the center y-axis for standard sans-serif uppercase letters
    const textY = y + badgeHeight / 2 + fontSize * 0.05; 
    
    ctx.fillText(statusText, textX, textY);

    return canvas;
}