JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

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

JavaScript

/**
 * для вопроса https://qna.habr.com/q/954465
 * Как лучше всего анимировать отрисовку кривой Безье canvas?
 */
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');


// Define the points as {x, y}
let start = {x: 50, y: 20};
let cp1 = {x: 230, y: 30};
let cp2 = {x: 150, y: 80};
let end = {x: 250, y: 100};

let offset = 0;
const dashLength = 250;

const render = () => {
  ctx.clearRect(0, 0, canvas.width, canvas.height);

  // Cubic Bézier curve
  ctx.beginPath();
  ctx.moveTo(start.x, start.y);
  ctx.bezierCurveTo(cp1.x, cp1.y, cp2.x, cp2.y, end.x, end.y);

  // магия!
  ctx.setLineDash([dashLength]);
  ctx.lineDashOffset = dashLength - offset;
  ctx.stroke();
  
  offset += 4;

  requestAnimationFrame(render);
}

render();