Skip to content
Snippets Groups Projects
Commit 172d8ccb authored by Shraddha Raghuram's avatar Shraddha Raghuram
Browse files

roadmap

parent f3273e02
No related branches found
No related tags found
No related merge requests found
......@@ -269,7 +269,8 @@
// }
let branchesDrawn = [false, false, false, false]; // Track which branches have been drawn
let branchPositions = [600, 1200, 1800, 2400]; // The vertical positions of each branch
let branchPositions = [600, 1200, 1800, 2400]; // The vertical positions where branches appear
let totalHeight = 3000; // Total height for the vertical line
function verticalLine(x, y1, y2, ctx) {
ctx.moveTo(x, y1);
......@@ -296,10 +297,10 @@ function horizontalLine(x1, x2, y, ctx) {
ctx.lineTo(x2, y);
}
function drawBranch(ctx, canvas_h, index) {
function drawBranch(ctx, index) {
var centerX = ctx.canvas.width / 2;
// Draw branches based on the index (ensuring they remain independent)
// Draw branches based on the index
if (index === 0) {
circularArc(centerX - 30, 600, ctx, 3);
horizontalLine(centerX - 30, centerX - 400, 630, ctx);
......@@ -323,23 +324,13 @@ function drawBranch(ctx, canvas_h, index) {
function draw() {
let canvas = document.getElementById("roadmap");
canvas.width = 1300;
canvas.height = 3000;
canvas.height = totalHeight;
if (!canvas.getContext) return;
var ctx = canvas.getContext("2d");
var gradient = ctx.createLinearGradient(0, 0, 0, 13370);
var gradient = ctx.createLinearGradient(0, 0, 0, totalHeight);
gradient.addColorStop(0, "#185A4F");
gradient.addColorStop(0.36, "#185A4F");
gradient.addColorStop(0.373, "#05BE85");
gradient.addColorStop(0.381, "#05BE85");
gradient.addColorStop(0.387, "#05BE85");
gradient.addColorStop(0.38, "#05BE85");
gradient.addColorStop(0.41, "#185A4F");
gradient.addColorStop(0.53534, "#185A4F");
gradient.addColorStop(0.57648, "#62D881");
gradient.addColorStop(0.63287, "#62D881");
gradient.addColorStop(0.68127, "#185A4F");
gradient.addColorStop(1,"#185A4F");
gradient.addColorStop(1, "#185A4F");
ctx.strokeStyle = gradient;
ctx.lineWidth = 17;
ctx.lineCap = 'round';
......@@ -348,15 +339,16 @@ function draw() {
var scrTop = document.documentElement.scrollTop; // Get the scroll position
var canvas_h = ctx.canvas.height;
var maxLineHeight = Math.min(scrTop + window.innerHeight * 0.8, totalHeight); // Limit vertical line growth to the total height
// Draw the main vertical line
// Draw the vertical line as it grows with scrolling
var centerX = canvas.width / 2;
verticalLine(centerX, 200, 3000, ctx);
verticalLine(centerX, 200, maxLineHeight, ctx);
// Draw branches as the user scrolls down
// Draw branches as the user scrolls past their designated positions
branchPositions.forEach((pos, index) => {
if (scrTop > pos - window.innerHeight * 0.8 && !branchesDrawn[index]) {
drawBranch(ctx, canvas_h, index);
drawBranch(ctx, index);
}
});
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment