Image To Lead Sketch Converter

/**
 * Converts an image into a lead sketch by blending a grayscale version of the image
 * with a blurred, inverted, grayscale version of itself.
 *
 * @param {HTMLImageElement} originalImg The original image object to convert.
 * @param {number} lineThickness The thickness and softness of the sketch lines. This corresponds to the blur radius applied during one of the steps. A higher value results in thicker, softer lines. Defaults to 3.
 * @param {number} lineDarkness A value from 0.0 to 1.0 controlling the darkness of the sketch lines. A higher value results in higher contrast and darker lines. Defaults to 0.7.
 * @returns {HTMLCanvasElement} A new canvas element containing the lead sketch image on a white background.
 */
function processImage(originalImg, lineThickness = 3, lineDarkness = 0.7) {
    const w = originalImg.naturalWidth || originalImg.width;
    const h = originalImg.naturalHeight || originalImg.height;

    // --- Step 1: Create the two layers needed for the "color dodge" blend ---

    // The TOP layer is a blurred, inverted, grayscale version of the image.
    const topLayerCanvas = document.createElement('canvas');
    const topLayerCtx = topLayerCanvas.getContext('2d');
    topLayerCanvas.width = w;
    topLayerCanvas.height = h;

    // Apply the filters to create the top layer. The filter order mimics the manual process:
    // first make it grayscale, then invert the colors, then apply a blur.
    topLayerCtx.filter = `grayscale(1) invert(1) blur(${lineThickness}px)`;
    topLayerCtx.drawImage(originalImg, 0, 0, w, h);

    // The BOTTOM layer is a simple grayscale version of the image.
    // We will draw this onto the 'sketchCanvas' in the next step.


    // --- Step 2: Blend the layers to create the sketch effect ---

    // This canvas will hold the raw result of the blend operation.
    const sketchCanvas = document.createElement('canvas');
    const sketchCtx = sketchCanvas.getContext('2d');
    sketchCanvas.width = w;
    sketchCanvas.height = h;

    // Draw the grayscale bottom layer onto the sketch canvas.
    sketchCtx.filter = 'grayscale(1)';
    sketchCtx.drawImage(originalImg, 0, 0, w, h);
    sketchCtx.filter = 'none'; // Reset filter

    // Set the composite operation to 'color-dodge'. This is the key to the sketch effect.
    // It brightens the bottom layer based on the top layer's color, resulting in
    // bright whites and defined dark lines.
    sketchCtx.globalCompositeOperation = 'color-dodge';
    sketchCtx.drawImage(topLayerCanvas, 0, 0, w, h);
    sketchCtx.globalCompositeOperation = 'source-over'; // Reset composite operation


    // --- Step 3: Final adjustments and adding a background ---

    // The raw sketch can be faint. We'll enhance it with contrast/brightness
    // and place it on a solid white background to simulate drawing paper.
    const finalCanvas = document.createElement('canvas');
    const finalCtx = finalCanvas.getContext('2d');
    finalCanvas.width = w;
    finalCanvas.height = h;

    // Fill the background with white.
    finalCtx.fillStyle = 'white';
    finalCtx.fillRect(0, 0, w, h);

    // Enhance the darkness and contrast of the sketch lines.
    // We map the lineDarkness parameter (0.0 to 1.0) to suitable filter values.
    const darkness = Math.max(0, Math.min(1, lineDarkness));
    const contrast = 1 + darkness;          // Maps [0,1] -> [1, 2]
    const brightness = 1 - (darkness / 2);  // Maps [0,1] -> [1, 0.5]
    finalCtx.filter = `brightness(${brightness}) contrast(${contrast})`;

    // Draw the blended sketch result onto the final canvas with the white background.
    finalCtx.drawImage(sketchCanvas, 0, 0);

    return finalCanvas;
}