title: Having trouble drawing a progressive line from coordinate to coordinate in canvas
body: <p>Extremely new to javascript, and this is my first project! I am building a line graph utilizing Html Canvas and Javascript. I have a function that generates random numbers for X and Y coordinates, which then fills an empty array. I want to plot points and connect them as the Array fills. The end goal is to build a line graph that scales based on the points. I know the code is a little messy (I apologize), and there are other issues, but the problem I am focusing on right now is when the code runs it plots point A, then A B, then A B C, then A B C D, etc. I would like it to plot the points progressively, so it is point A then point B then point C, etc line by line. Hope this makes sense! </p>
  
  <p>From what I have seen from others, it looks like the best way to do this is to reference the previous point in the Array and make sure the line to is from that previous point. I thought that's what I was doing here or at least attempting to do. </p>
  
  <pre><code>// Return the x pixel for a graph point
  function getXPixel(val) {
      return ((canvas.width - xMarg) / plotArray.length) * val + (xMarg);
  }
  
  // Return the y pixel for a graph point
  function getYPixel(val) {
      return canvas.height - (((canvas.height - yMarg) / getMaxY()) * val) - yMarg;
  }
  
  function plotPoints() {
      ctx.strokeStyle = '#f00';
      ctx.beginPath();
      ctx.moveTo(getXPixel(0), getYPixel(plotArray[0].Y));
      for (var i = 1; i &lt; plotArray.length; i++) {
      ctx.lineTo(getXPixel(i), getYPixel(plotArray[i].Y));
      }
      ctx.stroke();
      label();
      drawCircle();
  
  }
  
  
  function drawCircle() {
      ctx.fillStyle = '#333';
      for (var i = 0; i &lt; plotArray.length; i++) {
          ctx.beginPath();
          ctx.arc(getXPixel(i), getYPixel(plotArray[i].Y), 4, 0, Math.PI * 2, true);
          ctx.fill();
      }
  }
  
  function setPlotHistory(){
      var plotHistory = plotArray.length
      plotArray[plotHistory.res] = {};
      plotArray[plotHistory.moveToX] = plotArray.X;
      plotArray[plotHistory.moveToY] = plotArray.Y;
  }
  
  
  runTest = setInterval(function() {
      var res = { //Create object of results with each test
          X: testsRun,
          Y: getRandomNumber(10,150)
      };
      if (plotArray.length === 5) {
          plotArray.shift();
      }
      plotArray.push(res); //put the result in the array
  setPlotHistory(res);
      document.getElementById('output').innerHTML = "Tests Run: " + testsRun;
      testsRun++; //up the number of tests by one 
      plotPoints();
  
  },testInt);
  
  
  </code></pre>
  
  <p>Not sure, how much info I should provide and did not want to fill the page up with the entire code, so for reference you can see my full code here <a href="https://jsfiddle.net/Crashwin/72vd1osL/3/" rel="nofollow noreferrer">https://jsfiddle.net/Crashwin/72vd1osL/3/</a></p>
  
  <p>Any help is appreciated!</p>