How to make line drawing animation in canvas?

Question

JavaScript

I wrote a function that draws an arrow on the coordinate line from x0 to x1 in the canvas: https://gyazo.com/38ecb65bfec50bf22e25c377430b1e0b . How to make the arrow appear not immediately, but as if it is drawn by hand? I did not find any intelligible tutorials, tell me which way to dig.

Answer 1

function drawCurvedArrow(start, 
                         end, 
                          curveHeigh
) {
  var x0 = 35
  var y0 = 175;
  var divValue=39;
  var arrowWidth = 15;
  var startPointX = x0+start*39;
  var endPointX = x0+end*39
  ctx.save();
  ctx.strokeStyle = 'tomato';
  ctx.lineWidth = 3;
  var curveCenter = (startPointX+endPointX)/2
  var arrowAngle = Math.atan2(curveCenter - endPointX, curveHeigh - y0) + Math.PI;
  ctx.beginPath();
  ctx.moveTo(startPointX, y0);
  ctx.quadraticCurveTo(curveCenter, curveHeigh, endPointX, y0);

  ctx.moveTo(endPointX - (arrowWidth * Math.sin(arrowAngle - Math.PI / 6)), 
             endPointY - (arrowWidth * Math.cos(arrowAngle - Math.PI / 6)));
  ctx.lineTo(endPointX, endPointY);

  ctx.lineTo(endPointX - (arrowWidth * Math.sin(arrowAngle + Math.PI / 6)), 
             endPointY - (arrowWidth * Math.cos(arrowAngle + Math.PI / 6)));
  ctx.stroke();
  ctx.closePath();
  ctx.restore();
}

Answer 2

You need to smoke requestAnimationFrame.