Image Paint Tool From Photo

/**
 * Converts a photo into a painting-like image by applying numerous small "brush strokes".
 *
 * @param {Image} originalImg The original image object to process.
 * @param {number} brushSize The size (width) of each brush stroke. Default is 5.
 * @param {number} strokeLength The length of each brush stroke. Default is 8.
 * @param {number} strokeDensity A percentage that controls the number of strokes applied. Higher values result in a more detailed but slower rendering. Default is 50.
 * @param {number} opacity The opacity of each brush stroke, from 0 (transparent) to 1 (opaque). Default is 0.7.
 * @returns {HTMLCanvasElement} A canvas element with the painted version of the image.
 */
function processImage(originalImg, brushSize = 5, strokeLength = 8, strokeDensity = 50, opacity = 0.7) {
    // Ensure parameters are parsed as numbers, with fallback defaults for invalid inputs.
    const numBrushSize = Number(brushSize) || 5;
    const numStrokeLength = Number(strokeLength) || 8;
    const numStrokeDensity = Number(strokeDensity) || 50;
    const numOpacity = Number(opacity) || 0.7;

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

    // Create a temporary canvas to sample pixel data from the original image.
    const sourceCanvas = document.createElement('canvas');
    sourceCanvas.width = width;
    sourceCanvas.height = height;
    const sourceCtx = sourceCanvas.getContext('2d', { willReadFrequently: true });
    sourceCtx.drawImage(originalImg, 0, 0);
    const imageData = sourceCtx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Create the destination canvas where the painting will be rendered.
    const destCanvas = document.createElement('canvas');
    destCanvas.width = width;
    destCanvas.height = height;
    const destCtx = destCanvas.getContext('2d');

    // Fill the background with white, like a real canvas.
    destCtx.fillStyle = 'white';
    destCtx.fillRect(0, 0, width, height);

    // Set stroke properties for the "brush".
    destCtx.lineWidth = numBrushSize;
    destCtx.lineCap = 'round'; // Makes strokes look softer at the ends.

    // Calculate the number of strokes based on image area, brush size, and density.
    // A larger brush requires fewer strokes to cover the canvas.
    const numStrokes = Math.floor((width * height) / (numBrushSize > 0 ? numBrushSize : 1) * (numStrokeDensity / 100));

    // Draw the strokes randomly across the canvas.
    for (let i = 0; i < numStrokes; i++) {
        // Pick a random position from the original image to sample the color.
        const x = Math.floor(Math.random() * width);
        const y = Math.floor(Math.random() * height);

        // Get the color of the pixel at the random position.
        const pixelIndex = (y * width + x) * 4;
        const r = data[pixelIndex];
        const g = data[pixelIndex + 1];
        const b = data[pixelIndex + 2];

        // Set the stroke color and opacity.
        destCtx.strokeStyle = `rgba(${r}, ${g}, ${b}, ${numOpacity})`;

        // Define a short stroke centered on the sample point with a random angle.
        const angle = Math.random() * 2 * Math.PI;
        const halfLength = numStrokeLength / 2;
        
        const startX = x - halfLength * Math.cos(angle);
        const startY = y - halfLength * Math.sin(angle);
        const endX = x + halfLength * Math.cos(angle);
        const endY = y + halfLength * Math.sin(angle);

        // Draw the individual stroke.
        destCtx.beginPath();
        destCtx.moveTo(startX, startY);
        destCtx.lineTo(endX, endY);
        destCtx.stroke();
    }

    return destCanvas;
}