Image To Charcoal Sketch Converter

/**
 * Converts an image to a charcoal sketch effect.
 * This is achieved by blending a grayscale version of the image with a blurred, inverted version of itself,
 * then adjusting contrast and adding a noise texture to simulate the look of charcoal on paper.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {number} blurValue The radius of the blur filter, which affects the thickness of the sketch lines. Default is 8.
 * @param {number} contrast The final contrast percentage. Higher values create starker lines. Default is 200.
 * @param {number} brightness The final brightness percentage. Lower values darken the sketch. Default is 90.
 * @param {number} noiseAlpha The opacity (from 0 to 1) of the noise texture overlay. Set to 0 to disable. Default is 0.15.
 * @returns {HTMLCanvasElement} A canvas element with the charcoal sketch drawing.
 */
function processImage(originalImg, blurValue = 8, contrast = 200, brightness = 90, noiseAlpha = 0.15) {
    const w = originalImg.naturalWidth;
    const h = originalImg.naturalHeight;

    // Create the main canvas which will be returned
    const mainCanvas = document.createElement('canvas');
    mainCanvas.width = w;
    mainCanvas.height = h;
    const mainCtx = mainCanvas.getContext('2d');

    // Create a temporary canvas for intermediate operations
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = w;
    tempCanvas.height = h;
    const tempCtx = tempCanvas.getContext('2d');

    // 1. Create the inverted and blurred layer on the temp canvas.
    // This layer will be used with 'color-dodge' to create the sketch lines.
    tempCtx.filter = `grayscale(1) invert(1) blur(${blurValue}px)`;
    tempCtx.drawImage(originalImg, 0, 0);

    // 2. Draw the base grayscale image on the main canvas.
    mainCtx.filter = 'grayscale(1)';
    mainCtx.drawImage(originalImg, 0, 0);

    // 3. Blend the inverted-blurred layer onto the main canvas using 'color-dodge'.
    // This creates the white background and dark sketch lines.
    mainCtx.globalCompositeOperation = 'color-dodge';
    mainCtx.drawImage(tempCanvas, 0, 0);

    // 4. Apply final brightness and contrast adjustments.
    // This makes the lines darker and more defined, like charcoal.
    mainCtx.filter = `brightness(${brightness}%) contrast(${contrast}%)`;
    // We draw the canvas onto itself to apply the filter to the existing content.
    mainCtx.drawImage(mainCanvas, 0, 0);

    // 5. Add a noise texture to simulate paper grain and charcoal smudging.
    if (noiseAlpha > 0) {
        // Create an ImageData object filled with random grayscale noise.
        const noiseImageData = tempCtx.createImageData(w, h);
        const data = noiseImageData.data;
        for (let i = 0; i < data.length; i += 4) {
            const val = Math.random() * 255;
            data[i] = val;     // Red
            data[i + 1] = val; // Green
            data[i + 2] = val; // Blue
            data[i + 3] = 255; // Alpha
        }
        tempCtx.putImageData(noiseImageData, 0, 0);

        // Overlay the noise texture with a low opacity.
        mainCtx.globalCompositeOperation = 'overlay';
        mainCtx.globalAlpha = noiseAlpha;
        mainCtx.drawImage(tempCanvas, 0, 0);
    }

    // Reset all context properties to their default values for good practice
    mainCtx.filter = 'none';
    mainCtx.globalCompositeOperation = 'source-over';
    mainCtx.globalAlpha = 1.0;

    return mainCanvas;
}