Image Focus Icon Generator

function processImage(originalImg, iconSize = "256", focusX = "50", focusY = "50", zoom = "1.0", shape = "rounded", addFocusOverlay = "false") {
    const canvas = document.createElement("canvas");
    
    // Parse and sanitize parameters
    const size = parseInt(iconSize, 10) || 256;
    let fx = parseFloat(focusX);
    if (isNaN(fx)) fx = 50;
    let fy = parseFloat(focusY);
    if (isNaN(fy)) fy = 50;
    let scaleZoom = parseFloat(zoom);
    if (isNaN(scaleZoom) || scaleZoom <= 0) scaleZoom = 1.0;
    const isFocusOverlay = addFocusOverlay === "true" || addFocusOverlay === true;
    
    canvas.width = size;
    canvas.height = size;
    const ctx = canvas.getContext("2d");
    
    // Calculate the base scale so the image fully covers the icon dimensions
    const coverScale = Math.max(size / originalImg.width, size / originalImg.height);
    const actualScale = coverScale * scaleZoom;
    
    const scaledWidth = originalImg.width * actualScale;
    const scaledHeight = originalImg.height * actualScale;
    
    // Calculate focus coordinates mapped to the scaled image
    const focusPixelX = scaledWidth * (fx / 100);
    const focusPixelY = scaledHeight * (fy / 100);
    
    // Calculate offset to place the focus point at the center of the canvas
    let dx = (size / 2) - focusPixelX;
    let dy = (size / 2) - focusPixelY;
    
    // Constrain the offset boundaries so we don't end up with empty canvas edges (keeps it fully covered)
    if (scaledWidth >= size) {
        dx = Math.min(0, Math.max(size - scaledWidth, dx));
    } else {
        dx = (size - scaledWidth) / 2;
    }
    
    if (scaledHeight >= size) {
        dy = Math.min(0, Math.max(size - scaledHeight, dy));
    } else {
        dy = (size - scaledHeight) / 2;
    }

    // Apply path clipping for the specific shape
    ctx.beginPath();
    if (shape === "circle") {
        ctx.arc(size / 2, size / 2, size / 2, 0, Math.PI * 2);
    } else if (shape === "square") {
        ctx.rect(0, 0, size, size);
    } else {
        // default: "rounded" (Using standard paths for maximum compatibility)
        const radius = size * 0.15; // 15% border radius
        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();
    
    // Draw the image
    ctx.drawImage(originalImg, dx, dy, scaledWidth, scaledHeight);

    // Optional: Draw a camera-style focus bracket overlay
    if (isFocusOverlay) {
        const bracketSize = size * 0.15;
        const inset = size * 0.1;
        
        ctx.strokeStyle = "rgba(255, 255, 255, 0.8)";
        ctx.lineWidth = size * 0.02;
        ctx.lineCap = "round";
        ctx.lineJoin = "round";
        
        // Top Left
        ctx.beginPath();
        ctx.moveTo(inset, inset + bracketSize);
        ctx.lineTo(inset, inset);
        ctx.lineTo(inset + bracketSize, inset);
        ctx.stroke();
        
        // Top Right
        ctx.beginPath();
        ctx.moveTo(size - inset - bracketSize, inset);
        ctx.lineTo(size - inset, inset);
        ctx.lineTo(size - inset, inset + bracketSize);
        ctx.stroke();
        
        // Bottom Left
        ctx.beginPath();
        ctx.moveTo(inset, size - inset - bracketSize);
        ctx.lineTo(inset, size - inset);
        ctx.lineTo(inset + bracketSize, size - inset);
        ctx.stroke();
        
        // Bottom Right
        ctx.beginPath();
        ctx.moveTo(size - inset - bracketSize, size - inset);
        ctx.lineTo(size - inset, size - inset);
        ctx.lineTo(size - inset, size - inset - bracketSize);
        ctx.stroke();
        
        // Center crosshair
        const crossSize = size * 0.05;
        const center = size / 2;
        ctx.beginPath();
        ctx.moveTo(center - crossSize, center);
        ctx.lineTo(center + crossSize, center);
        ctx.moveTo(center, center - crossSize);
        ctx.lineTo(center, center + crossSize);
        ctx.stroke();
    }
    
    return canvas;
}