Photo Text Sticker Overlay Tool

function processImage(originalImg, stickerText = "Любимый предмет", position = "bottom-right", stickerColor = "#ff4757", rotationAngle = -10) {
    // Create canvas
    const canvas = document.createElement("canvas");
    const ctx = canvas.getContext("2d");

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

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

    // Determine font size relative to image size
    const fontSize = Math.max(20, Math.floor(canvas.width / 15));
    ctx.font = `bold ${fontSize}px 'Arial Black', Impact, sans-serif`;

    // Measure text to determine sticker size
    const metrics = ctx.measureText(stickerText);
    const padding = fontSize * 0.6;
    const boxWidth = metrics.width + padding * 2;
    const boxHeight = fontSize + padding * 2;
    const borderRadius = fontSize * 0.5;

    // Set a margin from the edges
    const margin = Math.max(20, canvas.width * 0.05);
    
    // Calculate center coordinates for the sticker based on position
    let cx, cy;
    switch(position.toLowerCase()) {
        case "top-left":
            cx = margin + boxWidth / 2;
            cy = margin + boxHeight / 2;
            break;
        case "top-right":
            cx = canvas.width - margin - boxWidth / 2;
            cy = margin + boxHeight / 2;
            break;
        case "bottom-left":
            cx = margin + boxWidth / 2;
            cy = canvas.height - margin - boxHeight / 2;
            break;
        case "center":
            cx = canvas.width / 2;
            cy = canvas.height / 2;
            break;
        case "bottom-right":
        default:
            cx = canvas.width - margin - boxWidth / 2;
            cy = canvas.height - margin - boxHeight / 2;
            break;
    }

    // Save context state before applying transformations
    ctx.save();
    
    // Move to the designated center, apply rotation
    ctx.translate(cx, cy);
    ctx.rotate(Number(rotationAngle) * Math.PI / 180);

    // Add a subtle drop shadow to the sticker background
    ctx.shadowColor = "rgba(0, 0, 0, 0.4)";
    ctx.shadowBlur = 10;
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 5;

    // Draw the sticker background (Rounded Rectangle)
    ctx.beginPath();
    const rx = -boxWidth / 2;
    const ry = -boxHeight / 2;
    if (ctx.roundRect) {
        ctx.roundRect(rx, ry, boxWidth, boxHeight, borderRadius);
    } else {
        // Fallback for browsers that don't support roundRect
        ctx.moveTo(rx + borderRadius, ry);
        ctx.lineTo(rx + boxWidth - borderRadius, ry);
        ctx.quadraticCurveTo(rx + boxWidth, ry, rx + boxWidth, ry + borderRadius);
        ctx.lineTo(rx + boxWidth, ry + boxHeight - borderRadius);
        ctx.quadraticCurveTo(rx + boxWidth, ry + boxHeight, rx + boxWidth - borderRadius, ry + boxHeight);
        ctx.lineTo(rx + borderRadius, ry + boxHeight);
        ctx.quadraticCurveTo(rx, ry + boxHeight, rx, ry + boxHeight - borderRadius);
        ctx.lineTo(rx, ry + borderRadius);
        ctx.quadraticCurveTo(rx, ry, rx + borderRadius, ry);
        ctx.closePath();
    }
    
    // Fill the background
    ctx.fillStyle = stickerColor;
    ctx.fill();

    // Reset shadow for the border
    ctx.shadowColor = "transparent";

    // Draw sticker border (white rim)
    ctx.lineWidth = Math.max(3, fontSize * 0.1);
    ctx.strokeStyle = "#ffffff";
    ctx.stroke();

    // Draw the sticker text
    ctx.fillStyle = "#ffffff";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    
    // Inner text shadow for depth
    ctx.shadowColor = "rgba(0,0,0,0.5)";
    ctx.shadowBlur = 4;
    ctx.shadowOffsetX = 2;
    ctx.shadowOffsetY = 2;
    
    // Render text slightly adjusted to account for center baseline visually
    ctx.fillText(stickerText, 0, fontSize * 0.05);

    // Restore context state
    ctx.restore();

    return canvas;
}