Image Track Visualizer

/**
 * Visualizes a track (a series of connected points) on top of an image.
 *
 * @param {Image} originalImg The original javascript Image object.
 * @param {string} trackPoints A string representing the track's coordinates. Points are separated by semicolons (;) and x/y coordinates by commas (,). Example: "10,20;50,60;100,80".
 * @param {string} trackColor The color of the track line (e.g., 'red', '#FF0000').
 * @param {number} trackWidth The width of the track line in pixels.
 * @param {string} startPointColor The fill color for the marker at the beginning of the track.
 * @param {string} endPointColor The fill color for the marker at the end of the track.
 * @param {number} pointRadius The radius of the start and end point markers in pixels.
 * @returns {HTMLCanvasElement} A canvas element with the original image and the track drawn on it.
 */
function processImage(originalImg, trackPoints = "25,150;50,50;100,80;150,160;200,100;250,180", trackColor = "rgba(255, 0, 0, 0.75)", trackWidth = 4, startPointColor = "#00FF00", endPointColor = "#0000FF", pointRadius = 6) {
    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);

    // If there are no track points, return the canvas with just the image
    if (!trackPoints || typeof trackPoints !== 'string' || trackPoints.trim() === '') {
        console.warn("Image Track Visualizer: No track points provided.");
        return canvas;
    }

    // Parse the trackPoints string into an array of {x, y} objects
    const points = trackPoints.split(';')
        .map(pair => {
            const coords = pair.trim().split(',');
            if (coords.length === 2) {
                const x = parseFloat(coords[0]);
                const y = parseFloat(coords[1]);
                // Ensure both coordinates are valid numbers
                if (!isNaN(x) && !isNaN(y)) {
                    return { x, y };
                }
            }
            return null; // Return null for invalid pairs
        })
        .filter(p => p !== null); // Filter out any null entries

    if (points.length < 1) {
        console.warn("Image Track Visualizer: No valid points found in the track data.");
        return canvas;
    }

    // Draw the track line if there are at least two points
    if (points.length > 1) {
        ctx.beginPath();
        ctx.moveTo(points[0].x, points[0].y);
        for (let i = 1; i < points.length; i++) {
            ctx.lineTo(points[i].x, points[i].y);
        }
        ctx.strokeStyle = trackColor;
        ctx.lineWidth = trackWidth;
        ctx.lineCap = 'round';
        ctx.lineJoin = 'round';
        ctx.stroke();
    }

    // Function to draw a point marker
    const drawMarker = (point, color) => {
        ctx.beginPath();
        ctx.arc(point.x, point.y, pointRadius, 0, 2 * Math.PI, false);
        ctx.fillStyle = color;
        ctx.fill();
        ctx.lineWidth = 2;
        ctx.strokeStyle = 'rgba(255, 255, 255, 0.8)'; // White border for better visibility
        ctx.stroke();
    };

    // Draw the start point
    drawMarker(points[0], startPointColor);

    // Draw the end point if it's different from the start point
    if (points.length > 1) {
        const lastPoint = points[points.length - 1];
        drawMarker(lastPoint, endPointColor);
    }

    return canvas;
}