Image Caption Generator For ‘Не буду спать!’

/**
 * Adds the caption "Не буду спать!" to an image in a classic meme style.
 * The text is white, uppercase, with a black outline, using the Impact font, and placed at the top of the image.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @returns {HTMLCanvasElement} A new canvas element with the caption applied to the image.
 */
function processImage(originalImg) {
    // Create a canvas and set its dimensions to match the original image.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

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

    // Define the caption text, converting to uppercase for the meme format.
    const captionText = "НЕ БУДУ СПАТЬ!";
    
    // Dynamically calculate the font size based on the image width for responsiveness.
    // A ratio of 1/9 of the width generally produces a good size.
    const fontSize = Math.round(canvas.width / 9);
    
    // Set the font style. 'Impact' is the classic meme font, with web-safe fallbacks.
    const font = `bold ${fontSize}px Impact, "Arial Black", sans-serif`;
    
    // Configure text properties for the classic white-text-with-black-outline look.
    ctx.font = font;
    ctx.fillStyle = 'white';
    ctx.strokeStyle = 'black';
    // The line width for the outline should scale with the font size.
    ctx.lineWidth = Math.max(1, Math.round(fontSize / 20));
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';

    // Calculate the position for the text.
    // Horizontally centered.
    const x = canvas.width / 2;
    // Vertically placed near the top with a 5% margin.
    const y = canvas.height * 0.05;

    // To create the outline effect, we first draw the "stroke" (the black outline).
    ctx.strokeText(captionText, x, y);
    // Then, we draw the "fill" (the white text) on top of the stroke.
    ctx.fillText(captionText, x, y);

    // Return the final canvas element.
    return canvas;
}