I am working on length measurement tool. The Image in which length of the objects will be measured is in tiff format and being rendered using openseadragon viewer. Length measurement logic implemented but not able to draw the line in between selected points.

below is code for openseadragon rendering the image.

 let viewer; // Declare viewer variable here
        let measureMode = false;
        let point1 = null;
        let point2 = null;

        async function displayDzi() {
        
                // Fetch the filename of the last uploaded file
                const response = await fetch("/getLastUploadedFileName");
               
                const fileName = await response.text();
                const dziPath = fileName.replace(/.[^/.]+$/, ".dzi"); // Change extension to .dzi

                // Display the DZI using OpenSeadragon
                viewer = OpenSeadragon({ // Assign viewer here
                    id: "osTiles",
                    prefixUrl: "/library/openseadragon/images/", // Adjust the path
                    tileSources: `/WorkingIMG/${dziPath}`, // Adjust the path
                    minZoomImageRatio: 0,
                    maxZoomPixelRatio: Infinity,
                    showNavigator: true,
                });

                viewer.addHandler('canvas-click', function(event) {
                    if (measureMode) {
                        const clickedPoint = viewer.viewport.viewerElementToImageCoordinates(event.position);
                        console.log(`Clicked at: ${clickedPoint.x}, ${clickedPoint.y}`);
                        if (point1 === null) {
                            point1 = clickedPoint;
                            console.log("First point selected:", point1);
                        } else if (point2 === null) {
                            point2 = clickedPoint;
                            console.log("Second point selected:", point2);
                            sendPointsToServer(point1, point2);
                            point1 = null;
                            point2 = null;
                        }
                    }
                });
            
        }

        // Call the displayDzi function when the page loads
        window.onload = function () {
            displayDzi();
        };