How to animate lines drawing on canvas fabric JS

Question

I would to animate the drawing of lines from point1 to point2 then point2 to point3 on canvas fabric_JS. So far i have managed to draw and display the points on canvas but i am missing the part of animation of line drawing. Here is the snippets

const canvas = new fabric.Canvas('gameCanvas', {selection: false});
let circle1, circle2, circle3;
let line1, line2;
let circles = [];

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

document.addEventListener('DOMContentLoaded', function(){
    drawCircles();
});

document.getElementById('animateBtn').addEventListener('click', function(){
    animateLinesDrawing();
});

function makeCircle(x, y)
{
    return new fabric.Circle({
        left: x,
        top: y,
        strokeWidth: 2,
        radius: 10,
        fill: 'white',
        stroke: '#666',
        selectable: false,
        hoverCursor: 'default',
        hasControls: false,
        hasBorders: false
    });

}

function drawCircles()
{

    circle1 = makeCircle(52.69, 17.77);
    circle2 = makeCircle(262.69, 120.77);
    circle3 = makeCircle(272.69, 232.77);
    
    circles.push(circle1);
    circles.push(circle2);
    circles.push(circle3);

}

function makeLine(coords)
{
    return new fabric.Line(coords, {
            fill: 'red',
            stroke: 'red',
            strokeWidth: 2,
            originX: 'right',
            originY: 'center',
            selectable: false,
            hoverCursor: 'default'
    });
}

function animateLinesDrawing()
{
    line1 = makeLine([circle1.left, circle1.top, circle2.left, circle2.top]);
    line2 = makeLine([circle2.left, circle2.top, circle3.left, circle3.top]);

   
    //line1_ x1: 52.69
    //line1_ y1: 17.77
    //line1_ x2: 262.69
    //line1_ y2: 120.77

    //startPoints:[line1.x1, line1.y1] 
    //endPoints:[line1.x2, line1.x2]
    
    

    line1.animate('x1', 262.69 , {
        onChange: canvas.renderAll.bind(canvas),
        duration: 1000,
        
    });

    
    line1.animate('y1', 120.77 , {
        onChange: canvas.renderAll.bind(canvas),
        duration: 1000,
        
    });


    canvas.add(line1);
    addCirclesTextToCanvas();

}

function addCirclesTextToCanvas()
{
    canvas.add(circle1, circle2, circle3);

    //..Add text inside the 3 circles

    for(let i = 0; i < circles.length; i++)
    {
      
        canvas.add(new fabric.Text((i + 1).toString(), {
          left: circles[i].left,
          top: circles[i].top,
          fontFamily: 'Arial',
          fontWeight: 'bold',
          fontSize: 14,
          fill: 'black',
          originX: 'center',
          originY: 'center'
     }));
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>
<button id="animateBtn">Animate Lines Drawing</button>

As you can see in the output the animation i am getting is not what i want. Any help would be appreciated.

Answer 1

In animate method give values for x2,y2 to change, and onComplete callback do the same for 2nd line.

DEMO

const canvas = new fabric.Canvas('gameCanvas', {
  selection: false
});
let circle1, circle2, circle3;
let line1, line2;
let circles = [];

fabric.Object.prototype.originX = fabric.Object.prototype.originY = 'center';

document.addEventListener('DOMContentLoaded', function() {
  drawCircles();
});

document.getElementById('animateBtn').addEventListener('click', function() {
  animateLinesDrawing();
});

function makeCircle(x, y) {
  return new fabric.Circle({
    left: x,
    top: y,
    strokeWidth: 2,
    radius: 10,
    fill: 'white',
    stroke: '#666',
    selectable: false,
    hoverCursor: 'default',
    hasControls: false,
    hasBorders: false
  });

}

function drawCircles() {

  circle1 = makeCircle(52.69, 17.77);
  circle2 = makeCircle(262.69, 120.77);
  circle3 = makeCircle(272.69, 232.77);
  line1 = makeLine([circle1.left, circle1.top, circle1.left, circle1.top]);
  line2 = makeLine([circle2.left, circle2.top, circle2.left, circle2.top]);
  canvas.add(line1,line2);
  circles.push(circle1);
  circles.push(circle2);
  circles.push(circle3);

}

function makeLine(coords) {
  return new fabric.Line(coords, {
    fill: 'red',
    stroke: 'red',
    strokeWidth: 2,
    originX: 'right',
    originY: 'center',
    selectable: false,
    hoverCursor: 'default'
  });
}

function animateLinesDrawing() {
  line1.set({x1:circle1.left, y1:circle1.top, x2:circle1.left, y2:circle1.top});
  line2.set({x1:circle2.left, y1:circle2.top, x2:circle2.left, y2:circle2.top});
  
  line1.animate({
    x2: circle2.left,
    y2: circle2.top
  }, {
    onChange: canvas.requestRenderAll.bind(canvas),
    onComplete: function() {
      line1.setCoords();
      line2.animate({
        x2: circle3.left,
        y2: circle3.top
      }, {
        onChange: canvas.requestRenderAll.bind(canvas),
        onComplete: line2.setCoords.bind(line2),
        duration: 1000
      });
    },
    duration: 1000

  });
  
  addCirclesTextToCanvas();
}

function addCirclesTextToCanvas() {
  canvas.add(circle1, circle2, circle3);

  //..Add text inside the 3 circles

  for (let i = 0; i < circles.length; i++) {

    canvas.add(new fabric.Text((i + 1).toString(), {
      left: circles[i].left,
      top: circles[i].top,
      fontFamily: 'Arial',
      fontWeight: 'bold',
      fontSize: 14,
      fill: 'black',
      originX: 'center',
      originY: 'center',
      selectable: false
    }));
  }

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.0.0/fabric.min.js"></script>
<canvas id="gameCanvas" width="500" height="300" style="border: 2px solid green;"></canvas>
<button id="animateBtn">Animate Lines Drawing</button>