Image To Mechanical Pencil Sketch Converter

/**
 * Converts an image to a mechanical pencil sketch effect.
 *
 * This function works by first creating a grayscale version of the image. It then creates
 * an inverted and blurred copy of this grayscale image. Finally, it blends these two
 * layers using a "Color Dodge" operation, which results in a sketch-like appearance where
 * edges are highlighted as dark lines on a light background. An optional contrast
 * adjustment is applied at the end to make the sketch lines "pop".
 *
 * @param {HTMLImageElement} originalImg The original image object to be converted.
 * @param {number} blurRadius A number that controls the thickness of the pencil lines.
 *   Smaller values (e.g., 1.0) create finer lines, simulating a sharp pencil.
 *   Larger values create thicker, softer lines. Defaults to 1.5.
 * @param {number} contrast A number that controls the darkness and sharpness of the lines.
 *   A value of 1.0 means no change. Values greater than 1.0 (e.g., 1.4) increase
 *   the contrast, making the lines darker and the whites brighter. Defaults to 1.4.
 * @returns {HTMLCanvasElement} A canvas element displaying the generated sketch image.
 */
function processImage(originalImg, blurRadius = 1.5, contrast = 1.4) {
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

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

    // Create a temporary canvas for intermediate image processing
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = width;
    tempCanvas.height = height;
    // Using { willReadFrequently: true } is a performance hint for the browser
    const tempCtx = tempCanvas.getContext('2d', {
        willReadFrequently: true
    });

    // Step 1: Draw the original image to the temp canvas to access its pixel data
    tempCtx.drawImage(originalImg, 0, 0, width, height);
    const imageData = tempCtx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Create two new ImageData objects to hold the manipulated pixel data
    const grayscaleImageData = tempCtx.createImageData(width, height);
    const invertedImageData = tempCtx.createImageData(width, height);

    // Step 2 & 3: In a single loop, create the grayscale version and the inverted grayscale version
    for (let i = 0; i < data.length; i += 4) {
        const r = data[i];
        const g = data[i + 1];
        const b = data[i + 2];
        const alpha = data[i + 3];

        // Use the standard luminosity formula for a more accurate grayscale conversion
        const gray = 0.299 * r + 0.587 * g + 0.114 * b;
        const invertedGray = 255 - gray;

        // Populate the data for the grayscale layer
        grayscaleImageData.data[i] = gray;
        grayscaleImageData.data[i + 1] = gray;
        grayscaleImageData.data[i + 2] = gray;
        grayscaleImageData.data[i + 3] = alpha;

        // Populate the data for the inverted layer
        invertedImageData.data[i] = invertedGray;
        invertedImageData.data[i + 1] = invertedGray;
        invertedImageData.data[i + 2] = invertedGray;
        invertedImageData.data[i + 3] = alpha;
    }

    // Step 4: Blur the inverted image using the blurRadius parameter
    tempCtx.putImageData(invertedImageData, 0, 0);
    tempCtx.filter = `blur(${blurRadius}px)`;
    // A common trick to "bake" a filter into a canvas is to draw it back onto itself
    tempCtx.drawImage(tempCanvas, 0, 0);
    tempCtx.filter = 'none'; // Reset filter for future use

    // Step 5: Combine the two layers to create the sketch effect
    // First, draw the base grayscale image onto our final canvas
    finalCtx.putImageData(grayscaleImageData, 0, 0);
    // Then, use the 'color-dodge' blend mode to merge the blurred-inverted layer
    finalCtx.globalCompositeOperation = 'color-dodge';
    finalCtx.drawImage(tempCanvas, 0, 0);
    // Reset the blend mode to the default
    finalCtx.globalCompositeOperation = 'source-over';

    // Step 6: (Optional) Apply a contrast adjustment to enhance the sketch lines
    if (contrast !== 1.0) {
        const finalImageData = finalCtx.getImageData(0, 0, width, height);
        const finalData = finalImageData.data;
        for (let i = 0; i < finalData.length; i += 4) {
            // Since it's grayscale, R, G, and B channels are the same.
            let val = finalData[i];
            // Apply a standard contrast formula
            val = ((((val / 255.0) - 0.5) * contrast) + 0.5) * 255.0;
            
            // Clamp the value to the valid 0-255 range
            const clampedVal = Math.max(0, Math.min(255, val));
            finalData[i] = clampedVal;
            finalData[i + 1] = clampedVal;
            finalData[i + 2] = clampedVal;
        }
        finalCtx.putImageData(finalImageData, 0, 0);
    }

    return finalCanvas;
}