Image Dot Art Creator

/**
 * Converts an image into dot art.
 *
 * @param {HTMLImageElement} originalImg The original image element.
 * @param {number} dotSize The size (diameter for circles, side length for squares) of each dot. Defaults to 5.
 * @param {number} spacing The space between each dot. Defaults to 1.
 * @param {string} shape The shape of the dots. Can be 'circle' or 'square'. Defaults to 'circle'.
 * @returns {HTMLCanvasElement} A canvas element with the dot art rendering.
 */
function processImage(originalImg, dotSize = 5, spacing = 1, shape = 'circle') {
    // Ensure parameters are valid numbers
    const numDotSize = Number(dotSize) || 5;
    const numSpacing = Number(spacing) || 1;

    // Calculate the step size for iterating through pixels
    const step = numDotSize + numSpacing;

    // Create a canvas and get its 2D rendering context
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d', { willReadFrequently: true });

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

    // Draw the original image onto the canvas to access its pixel data
    ctx.drawImage(originalImg, 0, 0, width, height);

    // Get the image data
    const imageData = ctx.getImageData(0, 0, width, height);
    const data = imageData.data;

    // Clear the canvas to prepare for drawing the dot art
    ctx.clearRect(0, 0, width, height);

    // Loop through the image in steps
    for (let y = 0; y < height; y += step) {
        for (let x = 0; x < width; x += step) {
            // Get the index of the pixel at the current location (top-left of the grid cell)
            const index = (y * width + x) * 4;

            // Extract the RGBA values of the pixel
            const r = data[index];
            const g = data[index + 1];
            const b = data[index + 2];
            const a = data[index + 3];

            // Set the fill color for the dot
            ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
            
            // Draw the specified shape
            if (shape.toLowerCase() === 'square') {
                ctx.fillRect(x, y, numDotSize, numDotSize);
            } else { // Default to circle
                ctx.beginPath();
                // Center the circle within its grid cell
                const centerX = x + numDotSize / 2;
                const centerY = y + numDotSize / 2;
                const radius = numDotSize / 2;
                ctx.arc(centerX, centerY, radius, 0, Math.PI * 2);
                ctx.fill();
            }
        }
    }

    // Return the final canvas with the dot art
    return canvas;
}