Image Freehand Drawing Tool

/**
 * Creates an interactive canvas on top of an image, allowing for freehand drawing.
 *
 * @param {HTMLImageElement} originalImg The original image element to be drawn upon.
 * @param {string} [color='red'] The color of the drawing stroke (e.g., 'red', '#FF0000').
 * @param {number} [lineWidth=5] The width of the drawing stroke in pixels.
 * @returns {HTMLCanvasElement} A canvas element with the image and drawing capabilities.
 */
function processImage(originalImg, color = 'red', lineWidth = 5) {
    // Create a canvas element
    const canvas = document.createElement('canvas');
    const ctx = canvas.getContext('2d');

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

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

    // Style the canvas for better user experience
    canvas.style.cursor = 'crosshair';

    // Configure the drawing context
    ctx.strokeStyle = color;
    ctx.lineWidth = lineWidth;
    ctx.lineCap = 'round'; // Makes line ends rounded
    ctx.lineJoin = 'round'; // Makes line corners rounded

    // State variables for drawing
    let isDrawing = false;
    let lastX = 0;
    let lastY = 0;

    /**
     * Calculates the coordinates of a mouse or touch event relative to the canvas.
     * @param {MouseEvent | TouchEvent} e The mouse or touch event.
     * @returns {{x: number, y: number}} The coordinates.
     */
    function getEventCoordinates(e) {
        const rect = canvas.getBoundingClientRect();
        let x, y;

        if (e.touches && e.touches.length > 0) {
            // Touch event
            x = e.touches[0].clientX - rect.left;
            y = e.touches[0].clientY - rect.top;
        } else {
            // Mouse event
            x = e.clientX - rect.left;
            y = e.clientY - rect.top;
        }
        return { x, y };
    }

    /**
     * Handles the mousedown / touchstart event to begin a drawing stroke.
     * @param {MouseEvent | TouchEvent} e The event.
     */
    function startDrawing(e) {
        e.preventDefault();
        isDrawing = true;
        const { x, y } = getEventCoordinates(e);
        [lastX, lastY] = [x, y];

        // Begin a new path
        ctx.beginPath();
        ctx.moveTo(lastX, lastY);
    }

    /**
     * Handles the mousemove / touchmove event to draw a line segment.
     * @param {MouseEvent | TouchEvent} e The event.
     */
    function draw(e) {
        if (!isDrawing) return;
        e.preventDefault();
        const { x, y } = getEventCoordinates(e);

        // Draw a line to the new position
        ctx.lineTo(x, y);
        ctx.stroke();

        [lastX, lastY] = [x, y];
    }

    /**
     * Handles mouseup / touchend / mouseout events to stop drawing.
     */
    function stopDrawing() {
        if (isDrawing) {
            isDrawing = false;
        }
    }

    // Add event listeners for both mouse and touch events
    canvas.addEventListener('mousedown', startDrawing);
    canvas.addEventListener('mousemove', draw);
    canvas.addEventListener('mouseup', stopDrawing);
    canvas.addEventListener('mouseout', stopDrawing);

    canvas.addEventListener('touchstart', startDrawing, { passive: false });
    canvas.addEventListener('touchmove', draw, { passive: false });
    canvas.addEventListener('touchend', stopDrawing);
    canvas.addEventListener('touchcancel', stopDrawing);

    return canvas;
}