Pizza Image Tool

function processImage(originalImg, numSlices = 8, gap = 15, crustThickness = 0.05) {
    // Parse tool parameters ensuring valid types and values 
    numSlices = parseInt(numSlices);
    if (isNaN(numSlices) || numSlices < 1) numSlices = 8;
    
    gap = parseFloat(gap);
    if (isNaN(gap) || gap < 0) gap = 15;

    crustThickness = parseFloat(crustThickness);
    if (isNaN(crustThickness) || crustThickness < 0) crustThickness = 0.05;
    // Bound the crust thickness logic
    crustThickness = Math.min(0.5, Math.max(0, crustThickness));
    
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    
    const w = originalImg.width;
    const h = originalImg.height;
    
    // The center point of the original image
    const cx = w / 2;
    const cy = h / 2;
    // The "radius" of the pizza based on the smallest dimension
    const r = Math.min(w, h) / 2;
    
    if (r <= 0) return canvas; // Safety check for invalid inputs

    // Enlarge the canvas slightly so expanding pizza slices do not get cut off
    canvas.width = w + gap * 2;
    canvas.height = h + gap * 2;
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    
    // Convert the image into separated pizza slices
    for (let i = 0; i < numSlices; i++) {
        const startAngle = (i * 2 * Math.PI) / numSlices;
        const endAngle = ((i + 1) * 2 * Math.PI) / numSlices;
        
        // Mid angle is used to determine to which direction a slice shoots out
        const midAngle = (startAngle + endAngle) / 2;
        
        // Radial offset calculation
        const dx = Math.cos(midAngle) * gap;
        const dy = Math.sin(midAngle) * gap;
        
        ctx.save();
        // Shift context to draw this individual pizza slice radially outward
        ctx.translate(centerX + dx, centerY + dy);
        
        // Define pizza slice geometric shape (Path: Center -> Arc Outline -> Center)
        ctx.beginPath();
        ctx.moveTo(0, 0);
        ctx.arc(0, 0, r, startAngle, endAngle);
        ctx.closePath();
        
        // Clip so that we ONLY draw within the bounds of this current slice shape
        ctx.clip();
        
        // Draw the image, offsetting negatively to align the exact image sub-region
        ctx.drawImage(originalImg, -cx, -cy);
        
        // Apply an outer visually 'baked crust' style layer to the slice edge
        if (crustThickness > 0) {
            // Draw a stroke precisely across the pizza outer ring
            ctx.beginPath();
            ctx.arc(0, 0, r, startAngle, endAngle);
            ctx.lineWidth = r * crustThickness * 2; // Multiplied by 2 since half falls outside the clip
            ctx.strokeStyle = "rgba(210, 105, 30, 0.4)"; // Warm, crust tone
            ctx.stroke();
            
            // Create a depth shadow gradient overlay to give a 3D crust volume look
            const crustRadiusInner = r * Math.max(0.01, (1 - crustThickness));
            const gradient = ctx.createRadialGradient(0, 0, crustRadiusInner, 0, 0, r);
            gradient.addColorStop(0, "rgba(0,0,0,0)");
            gradient.addColorStop(1, "rgba(0,0,0,0.6)"); // Darken edge intensely
            
            ctx.fillStyle = gradient;
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.arc(0, 0, r, startAngle, endAngle);
            ctx.closePath();
            ctx.fill();
        }
        
        ctx.restore();
    }
    
    return canvas;
}