How to animate the closed: true option line (drawLine)

[umairali]

I want to animate the line from first point to close point of line i am using below code. Can you please give some example to animate the line.

$('canvas').drawLine({
  strokeStyle: '#000',
  strokeWidth: 10,
  x1: 100, y1: 50,
  x2: 100, y2: 150,
  x3: 200, y3: 100,
  x4: 150, y4: 200,
  closed: true
});

[umairali]

i want to draw a line like below image.

[caleb531]

@umairali Thanks for your feedback; I always enjoy a good challenge. ;)

See my code example below. There is a points array which you can populate to draw the line:

https://projects.calebevans.me/jcanvas/sandbox/

var $canvas = $('canvas').eq(0);

var points = [
  {x: 100, y: 50},
  {x: 100, y: 150},
  {x: 200, y: 100},
  {x: 150, y: 200},
  {x: 250, y: 200},
  {x: 150, y: 300},
];

function completeWrapper(i) {
  return function (lineLayer) {
    var setProps = {};
    setProps['x' + (i + 3)] = points[i + 1].x;
    setProps['y' + (i + 3)] = points[i + 1].y;
    $canvas.setLayer(lineLayer, setProps);
  };
}

$canvas.drawLine({
  layer: true,
  name: 'graph-line',
  strokeStyle: '#000',
  strokeWidth: 10,
  rounded: true
});
var lineLayer = $canvas.getLayer('graph-line');

lineLayer.x1 = points[0].x;
lineLayer.y1 = points[0].y;
lineLayer.x2 = points[0].x;
lineLayer.y2 = points[0].y;

$canvas.drawLayers();

for (var i = 0; i < points.length - 1; i += 1) {

  var animateProps = {};
  animateProps['x' + (i + 2)] = points[i + 1].x;
  animateProps['y' + (i + 2)] = points[i + 1].y;
  $canvas.animateLayer(lineLayer, animateProps, {
    duration: 1000,
    easing: 'linear',
    complete: completeWrapper(i)
  });

}

[umairali]

Thanks @caleb531

If i insert closed : true in below code its joining first and end points after draw the first line points {x: 100, y: 50}

$canvas.drawLine({
  layer: true,
  name: 'graph-line',
  strokeStyle: '#000',
  strokeWidth: 10,
  rounded: true,
  closed: true
});

[umairali]

I remove the closed: true and insert first x and y points in the last of points array and its working.

var points = [
  {x: 100, y: 50},
  {x: 100, y: 150},
  {x: 200, y: 100},
  {x: 150, y: 200},
  {x: 250, y: 200},
  {x: 150, y: 300},
  {x: 100, y: 50},
];

[caleb531]

@umairali closed: true has nothing to do with the behavior you are trying to achieve, which is why it wasn't included in the code solution I provided you.

But I'm glad it's working for you now. If it's the same to you, I will close this issue.

[umairali]

Actually i am drawing a circle graph so i need to close the first and end points.

[caleb531]

@umairali What you could do is make sure, in your points array, that the last point equals the first point. You could then add some code to call setLayer({closed: true}) after the last animation finishes (by comparing i === points.length - 1 or something).