Video Project Focus Icon Maker

function processImage(originalImg, iconSize = 256, focusStyle = 'brackets', overlayColor = '#ffffff', showPlayButton = 'true', cornerRadius = 16) {
    // Parse parameters
    const size = parseInt(iconSize, 10) || 256;
    const radius = parseInt(cornerRadius, 10) || 0;
    const isPlayBtnVisible = showPlayButton.toString().toLowerCase() === 'true';

    // Create main canvas
    const canvas = document.createElement('canvas');
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext('2d');

    // Handle corner radius clipping
    if (radius > 0) {
        ctx.beginPath();
        ctx.moveTo(radius, 0);
        ctx.lineTo(size - radius, 0);
        ctx.quadraticCurveTo(size, 0, size, radius);
        ctx.lineTo(size, size - radius);
        ctx.quadraticCurveTo(size, size, size - radius, size);
        ctx.lineTo(radius, size);
        ctx.quadraticCurveTo(0, size, 0, size - radius);
        ctx.lineTo(0, radius);
        ctx.quadraticCurveTo(0, 0, radius, 0);
        ctx.closePath();
        ctx.clip();
    }

    // 1. Draw Image (Cover)
    const imgRatio = originalImg.width / originalImg.height;
    let sWidth = originalImg.width;
    let sHeight = originalImg.height;
    let sX = 0;
    let sY = 0;

    if (imgRatio > 1) { // Landscape
        sWidth = sHeight;
        sX = (originalImg.width - sWidth) / 2;
    } else if (imgRatio < 1) { // Portrait
        sHeight = sWidth;
        sY = (originalImg.height - sHeight) / 2;
    }

    ctx.drawImage(originalImg, sX, sY, sWidth, sHeight, 0, 0, size, size);

    // 2. Add Focus Vignette Effect
    const gradient = ctx.createRadialGradient(size / 2, size / 2, size * 0.2, size / 2, size / 2, size * 0.8);
    gradient.addColorStop(0, 'rgba(0,0,0,0)');
    gradient.addColorStop(1, 'rgba(0,0,0,0.6)');
    ctx.fillStyle = gradient;
    ctx.fillRect(0, 0, size, size);

    // 3. Draw Overlay based on focusStyle
    ctx.strokeStyle = overlayColor;
    ctx.lineWidth = Math.max(2, size / 80);
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    const cx = size / 2;
    const cy = size / 2;

    if (focusStyle === 'cinema') {
        // Cinematic letterbox
        ctx.fillStyle = 'black';
        ctx.fillRect(0, 0, size, size * 0.15);
        ctx.fillRect(0, size * 0.85, size, size * 0.15);
        
        // REC Dot
        ctx.fillStyle = '#ff0000';
        ctx.beginPath();
        ctx.arc(size * 0.1, size * 0.075, size * 0.02, 0, Math.PI * 2);
        ctx.fill();
        
        ctx.fillStyle = overlayColor;
        ctx.font = `bold ${size * 0.04}px Arial`;
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText('REC', size * 0.15, size * 0.075);
        
    } else if (focusStyle === 'grid') {
        // Rule of thirds grid
        ctx.lineWidth = Math.max(1, size / 150);
        ctx.globalAlpha = 0.5;
        ctx.beginPath();
        // Verticals
        ctx.moveTo(size / 3, 0); ctx.lineTo(size / 3, size);
        ctx.moveTo((size / 3) * 2, 0); ctx.lineTo((size / 3) * 2, size);
        // Horizontals
        ctx.moveTo(0, size / 3); ctx.lineTo(size, size / 3);
        ctx.moveTo(0, (size / 3) * 2); ctx.lineTo(size, (size / 3) * 2);
        ctx.stroke();
        ctx.globalAlpha = 1.0;
        
    } else {
        // Default: Camera Autofocus 'brackets'
        const fSize = size * 0.6; // Spread of brackets
        const halfFSize = fSize / 2;
        const m = size * 0.12; // Length of bracket legs
        const x1 = cx - halfFSize;
        const y1 = cy - halfFSize;
        const x2 = cx + halfFSize;
        const y2 = cy + halfFSize;

        ctx.beginPath();
        // Top Left
        ctx.moveTo(x1, y1 + m); ctx.lineTo(x1, y1); ctx.lineTo(x1 + m, y1);
        // Top Right
        ctx.moveTo(x2 - m, y1); ctx.lineTo(x2, y1); ctx.lineTo(x2, y1 + m);
        // Bottom Right
        ctx.moveTo(x2, y2 - m); ctx.lineTo(x2, y2); ctx.lineTo(x2 - m, y2);
        // Bottom Left
        ctx.moveTo(x1 + m, y2); ctx.lineTo(x1, y2); ctx.lineTo(x1, y2 - m);
        ctx.stroke();
        
        // Center crosshair
        ctx.lineWidth = Math.max(1, size / 120);
        ctx.beginPath();
        const cLen = size * 0.05;
        ctx.moveTo(cx - cLen, cy); ctx.lineTo(cx + cLen, cy);
        ctx.moveTo(cx, cy - cLen); ctx.lineTo(cx, cy + cLen);
        ctx.stroke();
    }

    // 4. Draw Play Button overlay
    if (isPlayBtnVisible) {
        const pSize = size * 0.3; // Icon size

        // Drop shadow for Play button readability
        ctx.shadowColor = 'rgba(0,0,0,0.5)';
        ctx.shadowBlur = size * 0.05;
        ctx.shadowOffsetX = 0;
        ctx.shadowOffsetY = size * 0.01;

        // Circular background for play button
        ctx.fillStyle = 'rgba(255, 255, 255, 0.2)';
        ctx.beginPath();
        ctx.arc(cx, cy, pSize * 0.8, 0, Math.PI * 2);
        ctx.fill();
        
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.5)';
        ctx.lineWidth = Math.max(2, size / 100);
        ctx.stroke();

        // White Play Triangle
        ctx.fillStyle = overlayColor;
        ctx.beginPath();
        // Calculate triangle points centered visually
        const tWidth = pSize * 0.6;
        const tHeight = pSize * 0.7;
        const startX = cx - (tWidth / 2) + (tWidth * 0.15); // Offset slightly right to optically center
        
        ctx.moveTo(startX, cy - (tHeight / 2));
        ctx.lineTo(startX + tWidth, cy);
        ctx.lineTo(startX, cy + (tHeight / 2));
        ctx.closePath();
        ctx.fill();
        
        // Reset shadow
        ctx.shadowColor = 'transparent';
    }

    return canvas;
}