Image Sketchbook Filter

function processImage(originalImg, blurAmount = 4) {
    // Ensure blurAmount is non-negative, as CSS blur filter expects a non-negative length.
    const effectiveBlurAmount = Math.max(0, blurAmount);

    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Handle cases where the image might not be fully loaded or has no dimensions.
    if (width === 0 || height === 0) {
        // Create and return an empty canvas.
        const emptyCanvas = document.createElement('canvas');
        emptyCanvas.width = 0;
        emptyCanvas.height = 0;
        // Optionally, log a warning if appropriate for the tool's context.
        // console.warn("Image Sketchbook Filter: Original image has zero dimensions. Is it loaded?");
        return emptyCanvas;
    }

    // Create the main output canvas that will be returned.
    const outputCanvas = document.createElement('canvas');
    outputCanvas.width = width;
    outputCanvas.height = height;
    const ctx = outputCanvas.getContext('2d');

    // 1. Create the Grayscale Base Layer.
    // This canvas will hold the simple grayscale version of the original image.
    // This layer acts as the "paper" or base of the sketch.
    const grayscaleLayerCanvas = document.createElement('canvas');
    grayscaleLayerCanvas.width = width;
    grayscaleLayerCanvas.height = height;
    const grayscaleCtx = grayscaleLayerCanvas.getContext('2d');

    grayscaleCtx.filter = 'grayscale(100%)';
    grayscaleCtx.drawImage(originalImg, 0, 0, width, height);
    grayscaleCtx.filter = 'none'; // Reset filter for this context.

    // 2. Create the Inverted and Blurred Dodge Layer.
    // This layer is crucial for the sketch effect. It's created by:
    //   a. Taking the original image.
    //   b. Converting it to grayscale.
    //   c. Inverting the colors.
    //   d. Applying a Gaussian blur.
    // The amount of blur controls the "thickness" and "softness" of the sketch lines.
    const dodgeLayerCanvas = document.createElement('canvas');
    dodgeLayerCanvas.width = width;
    dodgeLayerCanvas.height = height;
    const dodgeCtx = dodgeLayerCanvas.getContext('2d');

    // Apply a chain of filters: grayscale, then invert, then blur.
    // The source for this drawing is the originalImg directly.
    dodgeCtx.filter = `grayscale(100%) invert(100%) blur(${effectiveBlurAmount}px)`;
    dodgeCtx.drawImage(originalImg, 0, 0, width, height);
    dodgeCtx.filter = 'none'; // Reset filter for this context.

    // 3. Composite the Layers on the Output Canvas to Create the Sketch Effect.
    // First, draw the grayscale base layer onto the output canvas.
    ctx.drawImage(grayscaleLayerCanvas, 0, 0, width, height);

    // Set the global composite operation to "color-dodge".
    // The "color-dodge" blend mode divides the bottom layer by the inverted top layer.
    // This brightens the base layer depending on the color of the top layer.
    // When the top layer (dodgeLayerCanvas) is a blurred, inverted grayscale image,
    // this process highlights edges and creates a sketch-like appearance.
    ctx.globalCompositeOperation = 'color-dodge';

    // Draw the dodge layer (inverted and blurred) on top of the grayscale base.
    // The color-dodge blending will occur here.
    ctx.drawImage(dodgeLayerCanvas, 0, 0, width, height);

    // Reset the global composite operation to its default ("source-over").
    // This is important so that any subsequent drawing operations on this context
    // (if the canvas is reused) behave as expected.
    ctx.globalCompositeOperation = 'source-over';

    return outputCanvas;
}