Image Contour Drawing Converter

/**
 * Converts an image into a contour drawing using the Sobel edge detection algorithm.
 *
 * @param {Image} originalImg The original image object to be processed.
 * @param {number} [threshold=100] The sensitivity for edge detection. Higher values mean fewer edges are detected. Range is typically 0-255.
 * @returns {HTMLCanvasElement} A canvas element displaying the contour drawing of the original image.
 */
function processImage(originalImg, threshold = 100) {
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

    const width = originalImg.width;
    const height = originalImg.height;
    canvas.width = width;
    canvas.height = height;

    // Draw the image to the canvas to get its pixel data
    ctx.drawImage(originalImg, 0, 0, width, height);
    const imageData = ctx.getImageData(0, 0, width, height);

    // Create a new ImageData object for the output
    const outputImageData = ctx.createImageData(width, height);
    const outputData = outputImageData.data;

    // 1. Convert the image to grayscale
    const grayscaleData = new Uint8Array(width * height);
    for (let i = 0; i < imageData.data.length; i += 4) {
        const r = imageData.data[i];
        const g = imageData.data[i + 1];
        const b = imageData.data[i + 2];
        // Using the luminosity method for grayscale conversion
        const grayscale = 0.299 * r + 0.587 * g + 0.114 * b;
        grayscaleData[i / 4] = grayscale;
    }

    // 2. Apply Sobel operator to detect edges
    const sobelX = [
        -1, 0, 1,
        -2, 0, 2,
        -1, 0, 1
    ];

    const sobelY = [
        -1, -2, -1,
         0,  0,  0,
         1,  2,  1
    ];

    for (let y = 0; y < height; y++) {
        for (let x = 0; x < width; x++) {
            const i = (y * width + x);
            let gx = 0;
            let gy = 0;

            // Apply the 3x3 Sobel kernels
            for (let ky = -1; ky <= 1; ky++) {
                for (let kx = -1; kx <= 1; kx++) {
                    const kernelIndex = (ky + 1) * 3 + (kx + 1);
                    const pixelX = x + kx;
                    const pixelY = y + ky;

                    // Handle edge pixels
                    if (pixelX >= 0 && pixelX < width && pixelY >= 0 && pixelY < height) {
                        const grayValue = grayscaleData[pixelY * width + pixelX];
                        gx += grayValue * sobelX[kernelIndex];
                        gy += grayValue * sobelY[kernelIndex];
                    }
                }
            }
            
            // Calculate the magnitude of the gradient
            const magnitude = Math.sqrt(gx * gx + gy * gy);

            // 3. Apply threshold to create a binary image (black contours on white background)
            const color = magnitude > threshold ? 0 : 255;
            
            const outputIndex = i * 4;
            outputData[outputIndex] = color;     // Red
            outputData[outputIndex + 1] = color; // Green
            outputData[outputIndex + 2] = color; // Blue
            outputData[outputIndex + 3] = 255;   // Alpha
        }
    }

    // Put the processed data back onto the canvas
    ctx.putImageData(outputImageData, 0, 0);

    return canvas;
}