title: Looping through an Array of coordinates to draw line on a html canvas
body: <p>I'm trying too loop through an Array of coordinates to draw several lines on a html canvas.</p>
  
  <p>It seems like each line is being drawn on top of each other and the line is not starting from a new coordinate in the loop.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var c = document.getElementById("lineCanvas");
  var ctx = c.getContext("2d");
  var data = [
        [
          [
            6.87462062085475,
            45.9746815056445,
            2494.80004882813
          ],
          [
            6.87473799526779,
            45.9772917433492,
            2517.48754882813
          ]
        ],
        [
          [
            6.87473461365077,
            45.9772995683242,
            2517.2578125
          ],
          [
            6.8736121249999,
            45.9779670155837,
            2542.50024414063
          ],
          [
            6.87299210781629,
            45.9781103097697,
            2579.26586914063
          ],
          [
            6.87223679891952,
            45.9780976249557,
            2623.55834960938
          ],
          [
            6.87169006623871,
            45.9782141639712,
            2674.02709960938
          ],
          [
            6.87133154968397,
            45.9781620504641,
            2706.29272460938
          ],
          [
            6.87084326975906,
            45.9784539456999,
            2685.76708984375
          ],
          [
            6.87055838217719,
            45.9797052404885,
            2641.150390625
          ],
          [
            6.86775431929958,
            45.9838701463132,
            2541.81811523438
          ],
          [
            6.86677434685096,
            45.9850426033623,
            2518.7724609375
          ],
          [
            6.86471620539337,
            45.9859078090035,
            2482.7353515625
          ],
          [
            6.86083954284208,
            45.9857654302634,
            2422.5908203125
          ],
          [
            6.85678792479354,
            45.9856953809239,
            2334.52661132813
          ],
          [
            6.85371440538845,
            45.9861255880752,
            2300.64892578125
          ],
          [
            6.85374919591106,
            45.987623548574,
            2328.4541015625
          ],
          [
            6.85538813707532,
            45.9885247948691,
            2368.02124023438
          ],
          [
            6.8571299935713,
            45.9893949398974,
            2430.18969726563
          ],
          [
            6.85762330877777,
            45.9903535872519,
            2444.35400390625
          ],
          [
            6.85792368848341,
            45.991104963556,
            2470.85522460938
          ],
          [
            6.86062047783254,
            45.9926610042636,
            2358.318359375
          ],
          [
            6.86367918950193,
            45.9952411154904,
            2238.4580078125
          ],
          [
            6.86651311990744,
            45.9958393525819,
            2198.28515625
          ],
          [
            6.86802868822584,
            45.9967659531001,
            2163.53515625
          ],
          [
            6.86890726501023,
            45.9985394379416,
            2082.47192382813
          ],
          [
            6.86946764936131,
            45.9989288273475,
            2065.57006835938
          ]
        ]
      ];
  var previous = [0, 0];
  
  $.each(data, function( index, value ) {
    $.each(value, function( index, value ) {
  
      ctx.moveTo(previous[0], previous[1]);
      ctx.lineTo(value[0], value[1]);
      ctx.stroke();
  
      previous = value;
    });
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;canvas id="lineCanvas" width="800" height="600" style="border:1px solid #000000;"&gt;&lt;/canvas&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Example: <a href="https://jsfiddle.net/ocrn9L13/" rel="nofollow noreferrer">https://jsfiddle.net/ocrn9L13/</a></p>