canvas animate drawing lines

Question

I have a JSON file with bunch of points that i wanted to slowly draw. I have read a tutorial but this just draw one line. But what I want is to draw several lines by order (draw one first then other) and with different start points. Here is the JSON file:

{
  "data": [
    {
      "line": {
        "color": "#96c23b",
        "points": [
          {
            "x": 1,
            "y": 2
          },
          {
            "x": 2,
            "y": 3
          },
          {
            "x": 4,
            "y": 5
          },
          {
            "x": 7,
            "y": 8
          }
        ],
        "width": 2.0
      },
      "type": "line",
      "line_id": "1"
    },
    {
      "line": {
        "color": "#DF5453",
        "points": [
          {
            "x": 33,
            "y": 34
          },
          {
            "x": 34,
            "y": 35
          },
          {
            "x": 38,
            "y": 39
          },
          {
            "x": 40,
            "y": 42
          },
          {
            "x": 45,
            "y": 46
          }
        ],
        "width": 5.0
      },
      "type": "line",
      "line_id": "2"
    }
  ]
}

The speed of drawing does not matter.

I know how to parse the JSON and draw the lines in canvas without animation. Here is the code with jQuery:

var points_list =  {"data":[
  {"line":{"color":"#96c23b","points":[{"x":1,"y":2},{"x":2,"y":3},{"x":4,"y":5},{"x":7,"y":8}],"width":2.0},"type":"line","line_id":"1"},
  {"line":{"color":"#DF5453","points":[{"x":33,"y":34},{"x":34,"y":35},{"x":38,"y":39},{"x":40,"y":42},{"x":45,"y":46}],"width":5.0},"type":"line","line_id":"2"}
]}

function drawLines() {
    var canvas = document.getElementById("canvas"),
    context = canvas.getContext("2d");

    $.each(points_list.data, function (key, value) {
        var info = value.line;
        var color = info.color;
        var width = info.width;
        var points = info.points;

        context.beginPath();
        context.moveTo(points[0].x, points[0].y);
        context.lineWidth = width;
        context.strokeStyle = color;
        context.fillStyle = color;

        for (var p = 1; p < points.length; p++) {
            context.lineTo(points[p].x, points[p].y);
        }
        context.stroke();
    });
}

Answer 1

Here is an example of tracking the positions of the outerList and the innerList using variables. The outerlist (points_list.data) is tracked using lineIndexB the innerList (points_list.data.line.points) is tracked using lineIndexA.

Each time the function drawLines fires, the next line segment is drawn, then the lineIndexA variable is incremented. If the line segment is complete, then lineIndexB is incremented.

This is using the setTimeout function to make the animation work, it could easily be converted to requestAnimationFrame.

 var points_list = {"data":[ {"line":{"color":"#96c23b","points":[{"x":1,"y":2},{"x":2,"y":3},{"x":4,"y":5},{"x":7,"y":8}],"width":2.0},"type":"line","line_id":"1"}, {"line":{"color":"#DF5453","points":[{"x":33,"y":34},{"x":34,"y":35},{"x":38,"y":39},{"x":40,"y":42},{"x":45,"y":46}],"width":5.0},"type":"line","line_id":"2"} ]}; var lineIndexA = 1; var lineIndexB = 0; var canvas = document.getElementById("canvas"); canvas.width = 500; canvas.height = 500; var context = canvas.getContext("2d"); function drawLines() { var value = points_list.data[lineIndexB]; var info = value.line; var color = info.color; var width = info.width; var points = info.points; context.beginPath(); context.moveTo(points[lineIndexA-1].x, points[lineIndexA-1].y); context.lineWidth = width; context.strokeStyle = color; context.fillStyle = color; context.lineTo(points[lineIndexA].x, points[lineIndexA].y); context.stroke(); lineIndexA = lineIndexA + 1; if (lineIndexA>points.length-1) { lineIndexA = 1; lineIndexB = lineIndexB + 1; } //stop the animation if the last line is exhausted... if (lineIndexB>points_list.data.length-1) return; setTimeout(function() { drawLines() }, 1000); } drawLines(); 

 <canvas id="canvas"></canvas>