Image With Excited Text Overlay Tool

/**
 * Overlays an image with "excited" styled text.
 * The text is styled to be bold, vibrant, and slightly rotated to convey energy.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {string} [text="Я заряжен и готов!"] The text to overlay on the image.
 * @param {string} [textColor='#FFFF00'] The color of the text fill.
 * @param {string} [strokeColor='#000000'] The color of the text outline.
 * @param {number} [fontSizeRatio=0.12] The font size as a ratio of the image's width (e.g., 0.1 means font size is 10% of image width).
 * @param {string} [fontFamily='Impact, sans-serif'] The font family for the text. Should be a bold, web-safe font.
 * @param {string} [textPosition='bottom'] The position of the text. Can be 'top', 'center', or 'bottom'.
 * @param {number} [rotation=-5] The rotation of the text in degrees.
 * @returns {HTMLCanvasElement} A canvas element with the image and text overlay.
 */
function processImage(originalImg, text = "Я заряжен и готов!", textColor = '#FFFF00', strokeColor = '#000000', fontSizeRatio = 0.12, fontFamily = 'Impact, sans-serif', textPosition = 'bottom', rotation = -5) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // --- Text Styling ---
    // Calculate the font size based on the image width and the provided ratio
    const fontSize = canvas.width * fontSizeRatio;
    ctx.font = `${fontSize}px ${fontFamily}`;
    ctx.fillStyle = textColor;
    ctx.strokeStyle = strokeColor;
    // Set the stroke width relative to the font size for a nice thick outline
    ctx.lineWidth = fontSize / 15;
    ctx.textAlign = 'center';

    // --- Text Positioning ---
    const x = canvas.width / 2;
    let y;
    // Add a margin to prevent text from touching the edges
    const margin = canvas.height * 0.1;

    switch (textPosition.toLowerCase()) {
        case 'top':
            y = margin;
            ctx.textBaseline = 'top';
            break;
        case 'center':
            y = canvas.height / 2;
            ctx.textBaseline = 'middle';
            break;
        case 'bottom':
        default:
            y = canvas.height - margin;
            ctx.textBaseline = 'bottom';
            break;
    }

    // --- Drawing Text with Rotation ---
    // Save the current canvas state
    ctx.save();
    // Translate the canvas origin to the point where the text will be drawn
    ctx.translate(x, y);
    // Rotate the canvas context
    ctx.rotate(rotation * Math.PI / 180);
    // Draw the text outline first
    ctx.strokeText(text, 0, 0);
    // Then draw the filled text on top
    ctx.fillText(text, 0, 0);
    // Restore the canvas state to what it was before translation and rotation
    ctx.restore();

    // Return the final canvas element
    return canvas;
}