Image Project Creation Icon And Text Field Tool

function processImage(originalImg, text = "Создание проекта", placeholder = "Введите название проекта...") {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    // Dimensions and layout settings
    const padding = 20;
    const minWidth = 400;
    const imgW = originalImg.width;
    const imgH = originalImg.height;
    
    // Ensure the canvas is at least 'minWidth' wide for the UI elements
    canvas.width = Math.max(imgW + padding * 2, minWidth);
    
    // Calculate UI heights
    const textHeight = 30; // approximate height allocated for the text
    const inputHeight = 40;
    const spacing = 15;
    
    // Total height calculation: padding + image + padding + text area + spacing + input area + padding
    const uiHeight = padding + textHeight + spacing + inputHeight + padding;
    canvas.height = padding + imgH + uiHeight;
    
    // Draw Background
    ctx.fillStyle = '#ffffff';
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    
    // Draw the original image centered horizontally
    const imgX = (canvas.width - imgW) / 2;
    const imgY = padding;
    ctx.drawImage(originalImg, imgX, imgY, imgW, imgH);
    
    // Set Y position for text underneath the image
    let currentY = imgY + imgH + padding;
    
    // 1. Draw Text
    ctx.fillStyle = '#333333';
    ctx.font = 'bold 18px sans-serif';
    ctx.textAlign = 'left';
    ctx.textBaseline = 'top';
    ctx.fillText(text, padding, currentY);
    
    currentY += textHeight + spacing;
    
    // 2. Draw Project Creation Icon (Folder +)
    const iconSize = 24;
    const iconX = padding;
    const iconY = currentY + (inputHeight - iconSize) / 2;
    
    ctx.save();
    ctx.translate(iconX, iconY);
    ctx.strokeStyle = '#4CAF50'; // Green theme for project creation
    ctx.lineWidth = 2;
    ctx.lineJoin = 'round';
    ctx.lineCap = 'round';
    
    // Outline of the modern folder
    ctx.beginPath();
    ctx.moveTo(2, 4);
    ctx.lineTo(9, 4);
    ctx.lineTo(11, 7);
    ctx.lineTo(22, 7);
    ctx.lineTo(22, 20);
    ctx.lineTo(2, 20);
    ctx.closePath();
    ctx.stroke();
    
    // The "Plus" symbol inside the folder
    ctx.beginPath();
    ctx.moveTo(12, 11);
    ctx.lineTo(12, 16);
    ctx.moveTo(9.5, 13.5);
    ctx.lineTo(14.5, 13.5);
    ctx.stroke();
    
    ctx.restore();
    
    // 3. Draw Text Field (Input Area)
    const inputX = iconX + iconSize + 15;
    const inputY = currentY;
    const inputW = canvas.width - inputX - padding;
    
    // Rounded rectangle path for the text field
    const radius = 4;
    ctx.beginPath();
    ctx.moveTo(inputX + radius, inputY);
    ctx.lineTo(inputX + inputW - radius, inputY);
    ctx.quadraticCurveTo(inputX + inputW, inputY, inputX + inputW, inputY + radius);
    ctx.lineTo(inputX + inputW, inputY + inputHeight - radius);
    ctx.quadraticCurveTo(inputX + inputW, inputY + inputHeight, inputX + inputW - radius, inputY + inputHeight);
    ctx.lineTo(inputX + radius, inputY + inputHeight);
    ctx.quadraticCurveTo(inputX, inputY + inputHeight, inputX, inputY + inputHeight - radius);
    ctx.lineTo(inputX, inputY + radius);
    ctx.quadraticCurveTo(inputX, inputY, inputX + radius, inputY);
    ctx.closePath();
    
    // Fill and outline the text field
    ctx.fillStyle = '#f9f9f9';
    ctx.fill();
    ctx.strokeStyle = '#cccccc';
    ctx.lineWidth = 1;
    ctx.stroke();
    
    // Draw inner Placeholder Text
    ctx.fillStyle = '#999999';
    ctx.font = '14px sans-serif';
    ctx.textBaseline = 'middle';
    ctx.fillText(placeholder, inputX + 12, inputY + inputHeight / 2);
    
    return canvas;
}