Image Sketch Filter Application

function processImage(originalImg, blurRadius = 5) {
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // Handle cases where the image might not be loaded or has no dimensions
    if (w === 0 || h === 0) {
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = w; // Could be 0
        emptyCanvas.height = h; // Could be 0
        // For a zero-size image, drawImage operations would be no-ops or error,
        // so returning an empty canvas of correct (zero) dimensions is appropriate.
        return emptyCanvas;
    }

    // Sanitize blurRadius parameter
    let numericBlurRadius = 5; // Start with the default value
    if (typeof blurRadius === 'string') {
        numericBlurRadius = parseFloat(blurRadius);
    } else if (typeof blurRadius === 'number') {
        numericBlurRadius = blurRadius;
    }

    // Fallback to default if parsing failed, was not a number, or is negative (invalid for blur).
    if (isNaN(numericBlurRadius) || numericBlurRadius < 0) {
        numericBlurRadius = 5; // Default blur strength
    }
    
    // A blur of 0px results in a threshold-like effect, not a sketch, due to the color-dodge.
    // Enforce a minimum of 1px to ensure a visible sketch appearance.
    // Smaller fractional values (e.g., 0.5px) could be allowed if very fine control is needed,
    // but 1px is a robust minimum for a typical sketch.
    const effectiveBlurRadius = Math.max(1, numericBlurRadius);

    // 1. Create Grayscale Layer
    // This canvas will hold the grayscale version of the original image.
    const grayscaleCanvas = document.createElement('canvas');
    grayscaleCanvas.width = w;
    grayscaleCanvas.height = h;
    const grayscaleCtx = grayscaleCanvas.getContext('2d');

    // Apply grayscale filter and draw the original image.
    // The image drawn onto grayscaleCanvas will be in grayscale.
    grayscaleCtx.filter = 'grayscale(100%)';
    grayscaleCtx.drawImage(originalImg, 0, 0, w, h);
    // Reset filter: good practice if the context were reused, though not strictly needed for these disposables.
    grayscaleCtx.filter = 'none';


    // 2. Create Inverted and Blurred Layer (from the grayscale image)
    // This canvas will hold an inverted and then blurred version of the grayscale image.
    const invertedBlurredCanvas = document.createElement('canvas');
    invertedBlurredCanvas.width = w;
    invertedBlurredCanvas.height = h;
    const invertedBlurredCtx = invertedBlurredCanvas.getContext('2d');

    // Apply invert and blur filters. The sequence implies:
    // 1. Take source (grayscaleCanvas).
    // 2. Invert its colors.
    // 3. Blur the result of the inversion.
    invertedBlurredCtx.filter = `invert(100%) blur(${effectiveBlurRadius}px)`;
    invertedBlurredCtx.drawImage(grayscaleCanvas, 0, 0, w, h); // Draw grayscale, filters apply
    invertedBlurredCtx.filter = 'none'; // Reset filter


    // 3. Create Output Canvas and Blend Layers
    // This is the final canvas that will be returned.
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = w;
    outputCanvas.height = h;
    const outputCtx = outputCanvas.getContext('2d');

    // Draw the grayscale image as the base layer.
    outputCtx.drawImage(grayscaleCanvas, 0, 0, w, h);

    // Set the global composite operation to 'color-dodge'.
    // This blend mode is key to the sketch effect. It brightens the base layer
    // based on the blend layer's color. When the blend layer is an inverted,
    // blurred version of the base, it creates lines where edges were.
    outputCtx.globalCompositeOperation = 'color-dodge';

    // Draw the inverted-blurred image on top.
    // This drawing is blended with the existing grayscale base using color-dodge.
    outputCtx.drawImage(invertedBlurredCanvas, 0, 0, w, h);

    // Reset global composite operation to default ('source-over')
    // This is important if the outputCanvas or its context is used for further drawing operations
    // outside this function, to prevent unexpected blending.
    outputCtx.globalCompositeOperation = 'source-over';

    return outputCanvas;
}