Image To Sketch Converter

/**
 * Converts an image into a pencil sketch effect.
 * This function simulates the common technique used in photo editing software:
 * 1. Create a grayscale version of the image.
 * 2. Create a second grayscale version, invert its colors, and apply a blur.
 * 3. Blend these two layers using a "Color Dodge" mode, which creates the sketch effect.
 *
 * @param {HTMLImageElement} originalImg The original image object to be converted.
 * @param {number} blurAmount The radius for the Gaussian blur in pixels. This controls the thickness and softness of the sketch lines. A higher value creates a softer, more abstract sketch. Defaults to 5.
 * @returns {HTMLCanvasElement} A new canvas element containing the sketched image.
 */
function processImage(originalImg, blurAmount = 5) {
    // Determine the dimensions from the loaded image object.
    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Create the main canvas which will serve as the bottom layer and the final output.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;

    // Create a temporary canvas for the top layer processing.
    const topLayerCanvas = document.createElement('canvas');
    const topLayerCtx = topLayerCanvas.getContext('2d');
    topLayerCanvas.width = width;
    topLayerCanvas.height = height;

    // --- Step 1: Prepare the top layer (Inverted, blurred grayscale) ---
    // We apply multiple filters to the context. These filters will affect the next drawing operation.
    // grayscale(1): Converts the image to black and white.
    // invert(1): Inverts the colors (black becomes white, white becomes black).
    // blur(): Applies a Gaussian blur. The blurAmount parameter controls the radius.
    // Math.max(0, blurAmount) ensures the blur value is not negative.
    topLayerCtx.filter = `grayscale(1) invert(1) blur(${Math.max(0, blurAmount)}px)`;
    // Draw the original image onto the temporary canvas to apply the filters.
    topLayerCtx.drawImage(originalImg, 0, 0, width, height);

    // --- Step 2: Prepare the bottom layer (Grayscale) ---
    // Apply a grayscale filter to the main canvas context.
    ctx.filter = 'grayscale(1)';
    // Draw the original image to create the grayscale base layer.
    ctx.drawImage(originalImg, 0, 0, width, height);

    // --- Step 3: Blend the layers ---
    // Set the global composite operation to 'color-dodge'.
    // This blend mode is the key to the sketch effect. It divides the bottom layer by the inverted
    // top layer. Where the top layer is lighter, the result is lighter. This effectively
    // turns everything white except for the edges detected by the blurred, inverted layer.
    ctx.globalCompositeOperation = 'color-dodge';
    // Draw the processed top layer onto the main canvas. The color-dodge blend mode
    // will be used to combine it with the existing bottom layer.
    ctx.drawImage(topLayerCanvas, 0, 0);

    // --- Step 4: Cleanup ---
    // Reset the context's filter and composite operation to their default values.
    // This is good practice to avoid side effects if the canvas is used for other drawing later.
    ctx.filter = 'none';
    ctx.globalCompositeOperation = 'source-over';

    // The main canvas now holds the final sketch image.
    return canvas;
}