Image Anatomical Drawing Filter Effect Tool

function processImage(originalImg, blurRadius = 1, lineDarkness = 1.2, paperColor = "#f8f8f8", sourceContrast = 120) {
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // Apply logical constraints to numerical parameters
    // Ensure blurRadius is not negative
    const safeBlurRadius = Math.max(0, Number(blurRadius)); 
    // Clamp lineDarkness to a practical range (e.g., 0.1 to 5.0)
    // This controls brightness from 122.5% down to 0% in the brightnessPercent calculation
    const safeLineDarkness = Math.max(0.1, Math.min(Number(lineDarkness), 5.0)); 
    // Ensure sourceContrast is not negative
    const safeSourceContrast = Math.max(0, Number(sourceContrast)); 

    // 1. Create output canvas and fill with paper color
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = w;
    outputCanvas.height = h;
    const outputCtx = outputCanvas.getContext('2d');
    
    outputCtx.fillStyle = paperColor;
    outputCtx.fillRect(0, 0, w, h);

    // 2. Grayscale and Contrasted Layer (`grayCanvas`)
    const grayCanvas = document.createElement('canvas');
    grayCanvas.width = w;
    grayCanvas.height = h;
    const grayCtx = grayCanvas.getContext('2d');

    // Apply grayscale and contrast filters
    grayCtx.filter = `grayscale(100%) contrast(${safeSourceContrast}%)`;
    grayCtx.drawImage(originalImg, 0, 0, w, h);
    grayCtx.filter = 'none'; // Clear filter for any subsequent draws on this context

    // 3. Inverted, Brightness-Adjusted, Blurred Layer (`invBlurCanvas`)
    const invBlurCanvas = document.createElement('canvas');
    invBlurCanvas.width = w;
    invBlurCanvas.height = h;
    const invBlurCtx = invBlurCanvas.getContext('2d');

    // Calculate brightness adjustment for the inverted layer based on lineDarkness
    // lineDarkness = 1.0 -> brightness = 100% (normal)
    // lineDarkness > 1.0 -> brightness < 100% (inverted layer darker -> final lines stronger)
    // lineDarkness < 1.0 -> brightness > 100% (inverted layer lighter -> final lines fainter)
    const brightnessPercent = 100 - (safeLineDarkness - 1.0) * 25;
    
    invBlurCtx.filter = `invert(100%) brightness(${brightnessPercent}%) blur(${safeBlurRadius}px)`;
    invBlurCtx.drawImage(grayCanvas, 0, 0, w, h); // Source for this layer is the gray/contrasted image
    invBlurCtx.filter = 'none'; // Clear filter

    // 4. Create Sketch on a Temporary Canvas (`tempSketchCanvas`) with a white background
    // This is crucial because `color-dodge` produces the standard sketch effect on a white base.
    const tempSketchCanvas = document.createElement('canvas');
    tempSketchCanvas.width = w;
    tempSketchCanvas.height = h;
    const tempSketchCtx = tempSketchCanvas.getContext('2d');

    tempSketchCtx.fillStyle = 'white'; // Sketch is created on a white "virtual paper"
    tempSketchCtx.fillRect(0, 0, w, h);
    
    // Draw the grayscale base image
    tempSketchCtx.drawImage(grayCanvas, 0, 0, w, h); 

    // Apply color-dodge blending with the inverted-blurred layer
    tempSketchCtx.globalCompositeOperation = 'color-dodge';
    tempSketchCtx.drawImage(invBlurCanvas, 0, 0, w, h); 
    
    tempSketchCtx.globalCompositeOperation = 'source-over'; // Reset composite operation

    // 5. Blend the B&W sketch (from tempSketchCanvas) onto the outputCanvas (already filled with paperColor)
    // 'multiply' blend mode: white areas of the sketch become transparent to the paperColor,
    // black lines remain black (or dark, as if drawn on the colored paper).
    outputCtx.globalCompositeOperation = 'multiply';
    outputCtx.drawImage(tempSketchCanvas, 0, 0, w, h);
    outputCtx.globalCompositeOperation = 'source-over'; // Reset composite operation

    return outputCanvas;
}