Image To HB Converter

/**
 * Converts an image to an "HB" pencil sketch style.
 * This effect is achieved by blending a grayscale version of the image
 * with a blurred, inverted version of itself using a "color-dodge" composite operation,
 * which is a standard technique for creating digital sketch effects.
 *
 * @param {Image} originalImg The original javascript Image object to be processed.
 * @param {number} lineThickness The thickness of the pencil lines, achieved by controlling the blur radius. Higher values create softer, thicker lines. Defaults to 4.
 * @param {number} contrast The contrast of the final sketch. Values are a percentage (e.g., 150 for 150%). Higher values make the lines darker and the whites brighter. Defaults to 150.
 * @returns {HTMLCanvasElement} A canvas element displaying the HB sketch version of the image.
 */
function processImage(originalImg, lineThickness = 4, contrast = 150) {
    // Create a canvas element to work with.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Set the canvas dimensions to match the original image.
    canvas.width = originalImg.width;
    canvas.height = originalImg.height;

    // Step 1: Draw a white background. This is crucial for the color-dodge blending mode
    // to work correctly, especially if the original image has transparent areas.
    ctx.fillStyle = 'white';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    // Step 2: Draw the grayscale version of the image. This will serve as the bottom layer for blending.
    ctx.filter = 'grayscale(1)';
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Step 3: Prepare to draw the top layer. We set the blending mode to "color-dodge".
    // This mode divides the bottom layer by the inverted top layer, creating the sketch effect.
    ctx.globalCompositeOperation = 'color-dodge';

    // Step 4: Apply a filter to the next draw operation.
    // This filter will create the top layer by making the image grayscale, inverting the colors,
    // and blurring it. The blur radius determines the "thickness" of the pencil lines.
    ctx.filter = `grayscale(1) invert(1) blur(${lineThickness}px)`;

    // Step 5: Draw the image again. The browser applies the filter from Step 4,
    // and then blends it with the existing canvas content (from Step 2) using the mode from Step 3.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // Step 6: Reset the context's filter and composite operation to their default states.
    ctx.filter = 'none';
    ctx.globalCompositeOperation = 'source-over';

    // Step 7: Apply a final contrast adjustment. The color-dodge can result in a faint image,
    // so increasing the contrast makes the lines darker and more defined, like a real pencil drawing.
    ctx.filter = `contrast(${contrast}%)`;
    // We draw the canvas onto itself to apply the filter to the existing content.
    ctx.drawImage(canvas, 0, 0, canvas.width, canvas.height);

    // Step 8: Reset the filter again for good practice.
    ctx.filter = 'none';

    // Return the final canvas with the HB sketch effect.
    return canvas;
}