Image Outline Creator With Black Dots And Dashes

/**
 * Creates an outline of an image using black dots and dashes by applying a 
 * Sobel filter for edge detection.
 *
 * @param {Image} originalImg The original Image object to process.
 * @param {number} [threshold=100] The sensitivity for edge detection. A lower value means more sensitive and more edges will be detected. Ranges typically from 20 to 200.
 * @returns {Promise<HTMLCanvasElement>} A canvas element with the rendered outline.
 */
async function processImage(originalImg, threshold = 100) {

    const width = originalImg.naturalWidth || originalImg.width;
    const height = originalImg.naturalHeight || originalImg.height;

    // Create a temporary canvas to draw the image and get its pixel data
    const tempCanvas = document.createElement('canvas');
    tempCanvas.width = width;
    tempCanvas.height = height;
    // Using { willReadFrequently: true } can optimize repeated getImageData calls, good practice.
    const tempCtx = tempCanvas.getContext('2d', {
        willReadFrequently: true
    });
    tempCtx.drawImage(originalImg, 0, 0, width, height);
    const imageData = tempCtx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Create the destination canvas to draw the outline on
    const destCanvas = document.createElement('canvas');
    destCanvas.width = width;
    destCanvas.height = height;
    const destCtx = destCanvas.getContext('2d');
    destCtx.fillStyle = 'black'; // All dots and dashes will be black

    // Step 1: Convert the image to grayscale for simpler processing.
    // We pre-calculate all grayscale values for efficiency.
    const grayData = new Uint8ClampedArray(width * height);
    for (let i = 0; i < data.length; i += 4) {
        // Use the standard luminance formula for perceived brightness
        const R = data[i];
        const G = data[i + 1];
        const B = data[i + 2];
        const gray = 0.299 * R + 0.587 * G + 0.114 * B;
        grayData[i / 4] = gray;
    }

    // Step 2: Apply a Sobel filter to detect edges.
    // We iterate from 1 to width/height-1 to avoid boundary issues with the 3x3 kernel.
    for (let y = 1; y < height - 1; y++) {
        for (let x = 1; x < width - 1; x++) {
            // Get grayscale values of the 3x3 pixel neighborhood
            const i = y * width + x;
            const p1 = grayData[i - width - 1]; // top-left
            const p2 = grayData[i - width];     // top-center
            const p3 = grayData[i - width + 1]; // top-right
            const p4 = grayData[i - 1];         // middle-left
            const p6 = grayData[i + 1];         // middle-right
            const p7 = grayData[i + width - 1]; // bottom-left
            const p8 = grayData[i + width];     // bottom-center
            const p9 = grayData[i + width + 1]; // bottom-right

            // Apply Sobel X kernel:
            // -1  0  +1
            // -2  0  +2
            // -1  0  +1
            const gx = (-1 * p1) + (1 * p3) + (-2 * p4) + (2 * p6) + (-1 * p7) + (1 * p9);

            // Apply Sobel Y kernel:
            // +1 +2 +1
            //  0  0  0
            // -1 -2 -1
            const gy = (1 * p1) + (2 * p2) + (1 * p3) + (-1 * p7) + (-2 * p8) + (-1 * p9);
            
            // Calculate the magnitude of the gradient
            const magnitude = Math.sqrt(gx * gx + gy * gy);

            // Step 3: If the magnitude is above the threshold, it's an edge pixel.
            if (magnitude > threshold) {
                // Draw a dot, a horizontal dash, or a vertical dash with random probability
                // to create a sketchy, hand-drawn effect.
                const rand = Math.random();
                const dashLength = 3;

                if (rand < 0.6) { // 60% chance for a dot
                    destCtx.fillRect(x, y, 1, 1);
                } else if (rand < 0.8) { // 20% chance for a horizontal dash
                    destCtx.fillRect(x, y, dashLength, 1);
                } else { // 20% chance for a vertical dash
                    destCtx.fillRect(x, y, 1, dashLength);
                }
            }
        }
    }

    return destCanvas;
}