Image Confirmation Tool

/**
 * Overlays a confirmation symbol on an image.
 * This function takes an image, draws it onto a canvas, and then overlays
 * a semi-transparent dark layer with a green circle containing a white checkmark
 * in the center, signifying a "Yes" or confirmation.
 *
 * @param {HTMLImageElement} originalImg The original image object to process.
 * @returns {HTMLCanvasElement} A new canvas element with the confirmation overlay.
 */
function processImage(originalImg) {
    // Create a canvas element to draw on
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

    // Get the dimensions from the original image
    const width = originalImg.naturalWidth;
    const height = originalImg.naturalHeight;

    // Set the canvas to the same dimensions as the image
    canvas.width = width;
    canvas.height = height;

    // 1. Draw the original image onto the canvas
    ctx.drawImage(originalImg, 0, 0);

    // 2. Draw a dark, semi-transparent overlay to ensure the confirmation symbol is visible
    ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
    ctx.fillRect(0, 0, width, height);

    // 3. Define dimensions for the confirmation symbol based on the image size
    const centerX = width / 2;
    const centerY = height / 2;
    const radius = Math.min(width, height) / 6; // The radius of the outer circle
    const lineWidth = Math.max(4, radius / 5); // The thickness of the checkmark and circle border

    // 4. Draw the green circle background for the checkmark
    ctx.beginPath();
    ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
    ctx.fillStyle = 'rgb(40, 167, 69)'; // A standard "success" green color
    ctx.fill();

    // 5. Draw the white checkmark inside the circle
    ctx.beginPath();
    ctx.strokeStyle = 'white';
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round';
    ctx.lineJoin = 'round';

    // Define the points of the checkmark relative to the circle's center and radius
    const startX = centerX - radius * 0.45;
    const startY = centerY;
    const midX = centerX - radius * 0.1;
    const midY = centerY + radius * 0.35;
    const endX = centerX + radius * 0.5;
    const endY = centerY - radius * 0.3;

    // Draw the checkmark lines
    ctx.moveTo(startX, startY);
    ctx.lineTo(midX, midY);
    ctx.lineTo(endX, endY);
    ctx.stroke();

    // Return the final canvas element
    return canvas;
}