Image To Colored Pencil Sketch Converter

function processImage(originalImg, blurRadius = '10', colorIntensity = '1.3') {
    // Parameter parsing and validation
    let radius = parseFloat(blurRadius);
    if (isNaN(radius) || radius <= 0) radius = 10;

    let saturation = parseFloat(colorIntensity);
    if (isNaN(saturation)) saturation = 1.3;

    const w = originalImg.width;
    const h = originalImg.height;

    // 1. Convert the original image to Grayscale
    const cvsGray = document.createElement('canvas');
    cvsGray.width = w; 
    cvsGray.height = h;
    const ctxGray = cvsGray.getContext('2d');
    ctxGray.filter = 'grayscale(100%)';
    ctxGray.drawImage(originalImg, 0, 0);

    // 2. Add padding to prevent the dark halo effect around edges during the blur phase.
    // A standard Gaussian blur spreads roughly 3 times its radius.
    const pad = Math.ceil(radius * 3);
    const expW = w + pad * 2;
    const expH = h + pad * 2;
    
    // Create an expanded canvas holding the grayscale image
    const cvsExp = document.createElement('canvas');
    cvsExp.width = expW; 
    cvsExp.height = expH;
    const ctxExp = cvsExp.getContext('2d');

    // Draw the actual image in the center
    ctxExp.drawImage(cvsGray, pad, pad);
    // Stretch the edges outward horizontally and vertically to clamp edges
    ctxExp.drawImage(cvsGray, 0, 0, w, 1, pad, 0, w, pad); // Top
    ctxExp.drawImage(cvsGray, 0, h - 1, w, 1, pad, pad + h, w, pad); // Bottom
    ctxExp.drawImage(cvsGray, 0, 0, 1, h, 0, pad, pad, h); // Left
    ctxExp.drawImage(cvsGray, w - 1, 0, 1, h, pad + w, pad, pad, h); // Right
    // Stretch the corners
    ctxExp.drawImage(cvsGray, 0, 0, 1, 1, 0, 0, pad, pad); // Top-Left
    ctxExp.drawImage(cvsGray, w - 1, 0, 1, 1, pad + w, 0, pad, pad); // Top-Right
    ctxExp.drawImage(cvsGray, 0, h - 1, 1, 1, 0, pad + h, pad, pad); // Bottom-Left
    ctxExp.drawImage(cvsGray, w - 1, h - 1, 1, 1, pad + w, pad + h, pad, pad); // Bottom-Right

    // 3. Invert and Blur the expanded grayscale image
    const cvsBlur = document.createElement('canvas');
    cvsBlur.width = expW; 
    cvsBlur.height = expH;
    const ctxBlur = cvsBlur.getContext('2d');
    ctxBlur.filter = `invert(100%) blur(${radius}px)`;
    ctxBlur.drawImage(cvsExp, 0, 0);

    // 4. Create the Black & White Pencil Sketch base via Color Dodge
    const cvsSketch = document.createElement('canvas');
    cvsSketch.width = w; 
    cvsSketch.height = h;
    const ctxSketch = cvsSketch.getContext('2d');
    
    // Draw the original grayscale as the bottom layer
    ctxSketch.drawImage(cvsGray, 0, 0);
    
    // Blend the inverted & blurred layer on top using Color Dodge
    ctxSketch.globalCompositeOperation = 'color-dodge';
    // Shift it back by the padding amount so it aligns perfectly perfectly
    ctxSketch.drawImage(cvsBlur, -pad, -pad);
    ctxSketch.globalCompositeOperation = 'source-over'; // Reset

    // 5. Build up the Final Colored Pencil Sketch
    const cvsFinal = document.createElement('canvas');
    cvsFinal.width = w; 
    cvsFinal.height = h;
    const ctxFinal = cvsFinal.getContext('2d');

    // Draw the original colored image, optionally boosting its saturation.
    // Boosting saturation compensates for colors fading structurally during sketch overlay.
    ctxFinal.filter = `saturate(${saturation * 100}%)`;
    ctxFinal.drawImage(originalImg, 0, 0);
    ctxFinal.filter = 'none';

    // Multiply the B&W Sketch on top.
    // The "Multiply" composite leaves black pencil strokes dark and lets translucent
    // white paper (whites in the sketch) preserve the full original color hues.
    ctxFinal.globalCompositeOperation = 'multiply';
    ctxFinal.drawImage(cvsSketch, 0, 0);
    
    // Reset compositor format
    ctxFinal.globalCompositeOperation = 'source-over';

    return cvsFinal;
}