Image Number Five Generator

function processImage(originalImg, fontSize = "10", bgColor = "#000000", useOriginalColors = "true", fixedColor = "#FFFFFF") {
    let size = parseInt(fontSize);
    if (isNaN(size) || size < 2) size = 10;
    const isOriginalColors = useOriginalColors.toLowerCase() === "true";

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

    // Temporary canvas for reading original pixel data
    const tempCanvas = document.createElement('canvas');
    const tempCtx = tempCanvas.getContext('2d');
    tempCanvas.width = width;
    tempCanvas.height = height;
    tempCtx.drawImage(originalImg, 0, 0);

    const imgData = tempCtx.getImageData(0, 0, width, height);
    const data = imgData.data;

    // Output canvas
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');
    canvas.width = width;
    canvas.height = height;

    // Fill background
    ctx.fillStyle = bgColor;
    ctx.fillRect(0, 0, width, height);

    // Setup text style for drawing the number "5"
    ctx.font = `bold ${size}px sans-serif`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // Loop through the image in grid steps based on the font size
    for (let y = size / 2; y < height; y += size) {
        for (let x = size / 2; x < width; x += size) {
            const px = Math.floor(x);
            const py = Math.floor(y);
            const index = (py * width + px) * 4;

            const r = data[index];
            const g = data[index + 1];
            const b = data[index + 2];
            const a = data[index + 3];

            // Only draw if the pixel is not fully transparent
            if (a > 0) {
                if (isOriginalColors) {
                    ctx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
                } else {
                    // Optional: calculate brightness to adjust opacity if using a fixed color
                    const brightness = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
                    const alpha = (a / 255) * brightness;
                    ctx.fillStyle = fixedColor;
                    ctx.globalAlpha = alpha;
                }
                
                // Draw the number '5' (Пять)
                ctx.fillText("5", x, y);
                ctx.globalAlpha = 1.0; 
            }
        }
    }

    return canvas;
}