Рисование шкалы времени от div до div с помощью canvas

У меня есть следующая разметка div

<div data-x="-1000" data-y="-1500">
// content
</div>
<div data-x="0" data-y="-1500">
// content
</div>

И у меня есть много из этих divs с разными значениями data-x и data-y в зависимости от их положения.

То, что я хочу достичь здесь, - это нарисовать что-то вроде временной шкалы между divs, поэтому div1 line to div2 line to div 3 и т.д.

Я хочу, чтобы это было сделано автоматически. Поэтому я пытаюсь создать цикл для него, но мои знания javascript/jquery не так уж хороши. Может ли кто-нибудь указать мне в хорошем направлении?

теперь у меня есть

    function drawTimeline() {

  var divs = document.getElementsByTagName('div');
   var canvas = document.getElementById('timeline');

  // Make sure we don't execute when canvas isn't supported
  if (canvas.getContext){

    // use getContext to use the canvas for drawing
    var ctx = canvas.getContext('2d');
    var prevCoord = {};

    for (var i = -1; div = divs[++i]; ) {
      if (div.dataset.x && div.dataset.y) {
        var x = parseInt(div.dataset.x);
        var y = parseInt(div.dataset.y);
        if ({} !== prevCoord) {

          ctx.beginPath();
          ctx.lineWidth="5";
          ctx.strokeStyle="purple"; // Purple path
          ctx.moveTo(prevCoord.x, prevCoord.y);
          ctx.lineTo(x, y);
          ctx.closePath();
          ctx.stroke()
        }

          prevCoord.x = x;
          prevCoord.y = y;
      }
    }

  } else {
    alert('You need Safari or Firefox 1.5+ to see this.');
  }

}

к сожалению, линия не правильна, как линейная линия, и это... может кто-то помочь мне с этим?