Image Text Replacement With Number 6 Tool

/**
 * Replaces a selected area of an image with the number "6" inside a colored box.
 *
 * @param {Image} originalImg The original image object to process.
 * @param {number} x The x-coordinate of the top-left corner of the replacement area.
 * @param {number} y The y-coordinate of the top-left corner of the replacement area.
 * @param {number} width The width of the replacement area.
 * @param {number} height The height of the replacement area.
 * @param {string} fontColor The color of the number "6".
 * @param {string} backgroundColor The background color of the replacement area.
 * @param {string} fontFamily The font family for the number "6".
 * @returns {HTMLCanvasElement} A new canvas element with the modified image.
 */
function processImage(originalImg, x = 10, y = 10, width = 100, height = 50, fontColor = '#000000', backgroundColor = '#FFFFFF', fontFamily = 'Arial') {
    // 1. Create a canvas element to draw on.
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // 2. Set the canvas dimensions to match the original image.
    // Using naturalWidth/Height is important for images that might not be rendered yet.
    canvas.width = originalImg.naturalWidth;
    canvas.height = originalImg.naturalHeight;

    // 3. Draw the original image onto the canvas to serve as the base.
    ctx.drawImage(originalImg, 0, 0, canvas.width, canvas.height);

    // 4. Draw a filled rectangle over the selected area.
    // This erases the content underneath and prepares the background for the text.
    ctx.fillStyle = backgroundColor;
    ctx.fillRect(x, y, width, height);

    // 5. Prepare the text style for drawing the number "6".
    // Calculate a good font size that fits well within the replacement area's height.
    const fontSize = height * 0.8;
    ctx.font = `${fontSize}px ${fontFamily}`;
    ctx.fillStyle = fontColor;

    // Center the text horizontally and vertically within the rectangle.
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';

    // 6. Calculate the center coordinates of the replacement area.
    const textX = x + width / 2;
    const textY = y + height / 2;
    
    // 7. Draw the number "6" onto the canvas at the calculated position.
    ctx.fillText('6', textX, textY);

    // 8. Return the modified canvas. This element can be appended to the DOM.
    return canvas;
}