First Come First Serve Scheduling Algorithm Simulation – Blancer.com Tutorials and projects

We were tasked to make a system to create a first come first serve scheduling algorithm. We were allowed to use any language and we chose JS, HTML, CSS. The code runs but the dots do not connect. Here’s the Output:
Here’s the code:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FCFS Scheduling Algorithm</title>
<style>
  body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
  }
  .container {
    width: 80%;
    margin: 50px auto;
  }
  canvas {
    border: 1px solid #ccc;
  }
</style>
</head>
<body>
<div class="container">
  <h1>FCFS Scheduling Algorithm</h1>
  <p>Enter process burst times separated by commas:</p>
  <input type="text" id="burstTimesInput" placeholder="e.g., 5,3,2,4">
  <button onclick="plotGraph()">Plot Graph</button>
  <canvas id="graphCanvas" width="600" height="400"></canvas>
</div>
<script>
  function plotGraph() {
    const burstTimesInput = document.getElementById('burstTimesInput').value;
    const burstTimes = burstTimesInput.split(',').map(Number);

    if (!burstTimes.every(time => Number.isInteger(time) && time > 0)) {
      alert("Please enter positive integers only.");
      return;
    }

    const canvas = document.getElementById('graphCanvas');
    const ctx = canvas.getContext('2d');
    
    const graphHeight = canvas.height - 50;
    const graphWidth = burstTimes.length * 50;
    const lineSpacing = 50;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    let startX = 50;
    let prevX = startX;
    let prevY = graphHeight;
    ctx.beginPath();
    ctx.moveTo(prevX, prevY);

    for (let i = 0; i < burstTimes.length; i++) {
      const nextX = startX + lineSpacing;
      const nextY = graphHeight - burstTimes[i] * 10;
      
      // Draw point
      ctx.beginPath();
      ctx.arc(nextX, nextY, 3, 0, Math.PI * 2);
      ctx.fillStyle = 'red';
      ctx.fill();
      
      // Connect the dots with a line
      ctx.lineTo(nextX, nextY);
      
      prevX = nextX;
      prevY = nextY;
      startX += lineSpacing;
    }

    ctx.strokeStyle = 'blue';
    ctx.lineWidth = 2;
    ctx.stroke();

    // Draw timeline
    ctx.beginPath();
    ctx.moveTo(30, graphHeight + 10);
    ctx.lineTo(graphWidth + 20, graphHeight + 10);
    ctx.stroke();

    // Draw timeline arrows
    ctx.beginPath();
    ctx.moveTo(30, graphHeight + 5);
    ctx.lineTo(40, graphHeight + 10);
    ctx.lineTo(30, graphHeight + 15);
    ctx.fill();

    ctx.beginPath();
    ctx.moveTo(graphWidth + 20, graphHeight + 5);
    ctx.lineTo(graphWidth + 10, graphHeight + 10);
    ctx.lineTo(graphWidth + 20, graphHeight + 15);
    ctx.fill();
  }
</script>
</body>
</html>

To connect the dots with a line, and also to improve the code and output.