roadmap

static/homepage-roadmap.js

@@ -273,29 +273,23 @@ let branchPositions = [600, 1200, 1800, 2400];  // The vertical positions where
 let totalHeight = 3000;  // Total height for the vertical line
 
 function verticalLine(x, y1, y2, ctx) {
-    // Draw the vertical line from y1 to the current height y2
     ctx.moveTo(x, y1);
     ctx.lineTo(x, y2);
 }
 
 function circularArc(x, y, ctx, typeID) {
-    // Draw arcs for the branches
     if (typeID == 1) {
-        ctx.arc(x, y, 30, Math.PI, Math.PI/2, true);  // top-left curve
-    }
-    else if (typeID == 2) {
+        ctx.arc(x, y, 30, Math.PI, Math.PI / 2, true);  // top-left curve
+    } else if (typeID == 2) {
         ctx.arc(x, y, 30, Math.PI * 1.5, 0, false);   // top-right curve
-    }
-    else if (typeID == 3) {
-        ctx.arc(x, y, 30, 0, Math.PI/2, false);       // bottom-right curve
-    }
-    else if (typeID == 4) {
+    } else if (typeID == 3) {
+        ctx.arc(x, y, 30, 0, Math.PI / 2, false);       // bottom-right curve
+    } else if (typeID == 4) {
         ctx.arc(x, y, 30, Math.PI * 1.5, Math.PI, true); // bottom-left curve
     }
 }
 
 function horizontalLine(x1, x2, y, ctx) {
-    // Draw the horizontal lines (branches)
     ctx.moveTo(x1, y);
     ctx.lineTo(x2, y);
 }
@@ -307,16 +301,13 @@ function drawBranch(ctx, index) {
     if (index === 0) {
         circularArc(centerX - 30, 600, ctx, 3);
         horizontalLine(centerX - 30, centerX - 400, 630, ctx);
-    }
-    else if (index === 1) {
+    } else if (index === 1) {
         circularArc(centerX + 30, 1200, ctx, 1);
         horizontalLine(centerX + 30, centerX + 400, 1230, ctx);
-    }
-    else if (index === 2) {
+    } else if (index === 2) {
         circularArc(centerX - 30, 1800, ctx, 3);
         horizontalLine(centerX - 30, centerX - 400, 1830, ctx);
-    }
-    else if (index === 3) {
+    } else if (index === 3) {
         circularArc(centerX + 30, 2400, ctx, 1);
         horizontalLine(centerX + 30, centerX + 400, 2430, ctx);
     }
@@ -343,6 +334,9 @@ function draw() {
     var scrTop = document.documentElement.scrollTop;  // Get the current scroll position
     var maxLineHeight = Math.min(scrTop + window.innerHeight * 0.8, totalHeight);  // Limit the growth of the vertical line
 
+    // Clear the canvas to redraw
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+
     // Draw the vertical line, growing with scrolling
     var centerX = canvas.width / 2;
     verticalLine(centerX, 200, maxLineHeight, ctx);  // Vertical line grows with scroll