add trackHover toggle

line-segment-intersection/src/App.svelte

@@ -8,6 +8,7 @@
   const HEIGHT = 320;
 
   let userPoint = { x: 5, y: 2 };
+  let trackHover = true;
 
   // Rectangle coordinates
   const blueRect = { x1: 6, y1: 1 }; // Blue rectangle corner
@@ -62,6 +63,8 @@
   }
 
   function handleMouseMove(event) {
+    if (!trackHover) return;
+
     const rect = canvas.getBoundingClientRect();
     const mouseX = event.clientX - rect.left;
     const mouseY = event.clientY - rect.top;
@@ -73,6 +76,10 @@
     };
   }
 
+  function handleCanvasClick() {
+    trackHover = !trackHover;
+  }
+
   function toCanvasCoords(x, y) {
     return {
       x: x * GRID_SIZE,
@@ -205,7 +212,7 @@
 <main>
   <h1>Line Segment Intersection</h1>
   <div class="canvas-container">
-    <canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:mousemove={handleMouseMove}></canvas>
+    <canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:mousemove={handleMouseMove} on:click={handleCanvasClick}></canvas>
   </div>
 
   <div class="calculations">
@@ -251,6 +258,7 @@
 
   canvas {
     display: block;
+    cursor: pointer;
   }
 
   .calculations {