Image To Pencil Sketch Converter

/**
 * Converts an image to a pencil sketch effect using canvas filters and blend modes.
 *
 * The effect is achieved by following these steps:
 * 1. Create a base layer by converting the original image to grayscale.
 * 2. Create a top layer by converting the image to grayscale, inverting the colors, and applying a Gaussian blur.
 * 3. Blend the top layer onto the base layer using the 'color-dodge' composite operation. This operation brightens the base layer based on the top layer's color, creating the highlight and stroke effects characteristic of a pencil sketch.
 *
 * @param {HTMLImageElement} originalImg The original image object to be converted.
 * @param {number} blurRadius The radius of the Gaussian blur applied to the inverted layer, in pixels. This value controls the thickness and intensity of the sketch lines. A higher value results in thicker, softer strokes. Defaults to 4.
 * @returns {HTMLCanvasElement} A new canvas element displaying the pencil sketch version of the image.
 */
function processImage(originalImg, blurRadius = 4) {
    // Ensure blurRadius is a valid non-negative number
    const safeBlurRadius = Math.max(0, Number(blurRadius));

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

    // Create the final canvas that will be returned to the user
    const finalCanvas = document.createElement('canvas');
    finalCanvas.width = width;
    finalCanvas.height = height;
    const finalCtx = finalCanvas.getContext('2d');

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

    // STEP 1: Draw the bottom layer (a grayscale version of the image) onto the final canvas.
    finalCtx.filter = 'grayscale(100%)';
    finalCtx.drawImage(originalImg, 0, 0, width, height);
    // Reset the filter so it doesn't affect subsequent drawing operations
    finalCtx.filter = 'none';

    // STEP 2: Create the top layer on the temporary canvas.
    // This involves converting to grayscale, inverting the colors, and blurring.
    // The CSS-style filter property allows us to chain these operations efficiently.
    topLayerCtx.filter = `grayscale(100%) invert(100%) blur(${safeBlurRadius}px)`;
    topLayerCtx.drawImage(originalImg, 0, 0, width, height);

    // STEP 3: Blend the blurred, inverted top layer onto the grayscale bottom layer.
    // 'color-dodge' is the key blending mode that creates the sketch effect by
    // dividing the bottom layer by the inverted top layer.
    finalCtx.globalCompositeOperation = 'color-dodge';
    finalCtx.drawImage(topLayerCanvas, 0, 0);

    // Reset the composite operation to the default for any future drawing on this context
    finalCtx.globalCompositeOperation = 'source-over';

    return finalCanvas;
}