Image First Work Tool

function processImage(originalImg, caption = "Первая работа", frameColor = "#ffffff", textColor = "#333333") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Calculate dimensions for a Polaroid-style frame
    // Frame size is proportional to the overall image dimensions
    const border = Math.max(originalImg.width, originalImg.height) * 0.05;
    const bottomBorder = border * 3.5; // Larger bottom area for the caption

    canvas.width = originalImg.width + (border * 2);
    canvas.height = originalImg.height + border + bottomBorder;

    // 1. Draw the frame (background)
    ctx.fillStyle = frameColor;
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // 2. Add a very subtle inner drop shadow for a more realistic framed effect
    ctx.shadowColor = 'rgba(0, 0, 0, 0.3)';
    ctx.shadowBlur = 15;
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;

    // 3. Draw the original image onto the canvas
    ctx.drawImage(originalImg, border, border, originalImg.width, originalImg.height);

    // Reset shadows so it doesn't apply to our text
    ctx.shadowColor = 'transparent';
    ctx.shadowBlur = 0;
    ctx.shadowOffsetX = 0;
    ctx.shadowOffsetY = 0;

    // 4. Draw the caption text ("Первая работа" / "First work")
    ctx.fillStyle = textColor;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    
    // Calculate appropriate font size depending on the bottom border's height
    const fontSize = Math.floor(bottomBorder * 0.35);
    
    // Choose web-safe handwritten-style fonts to convey a creative/draft artwork look
    ctx.font = `italic ${fontSize}px "Segoe Print", "Comic Sans MS", "Bradley Hand", cursive, sans-serif`;

    const textX = canvas.width / 2;
    const textY = canvas.height - (bottomBorder / 2);
    
    // Write the caption, making sure it doesn't exceed the width of the frame space
    ctx.fillText(caption, textX, textY, canvas.width - (border * 2));

    return canvas;
}