Анимированное рисование кривой Canvas, JS
Подскажите пожалуйста, как можно реализовать анимированное рисование кривых при загрузке страницы из точек (0,0) в конечные точки.
window.onload = function() {
const canvas = document.getElementById("drawingCanvas");
// 1-я кривая
const context_1 = canvas.getContext("2d");
context_1.moveTo(0,0);
const controlX_1_1 = 69;
const controlY_1_1 = 0;
const controlX_2_1 = 138;
const controlY_2_1 = 15;
const endPointX_1_1 = 207;
const endPointY_1_1 = 35;
context_1.bezierCurveTo(controlX_1_1, controlY_1_1, controlX_2_1, controlY_2_1, endPointX_1_1, endPointY_1_1);
context_1.moveTo(207,35);
const controlX_3_1 = 300;
const controlY_3_1 = 60;
const controlX_4_1 = 350;
const controlY_4_1 = 50;
const endPointX_2_1 = 414;
const endPointY_2_1 = 60;
context_1.bezierCurveTo(controlX_3_1, controlY_3_1, controlX_4_1, controlY_4_1, endPointX_2_1, endPointY_2_1);
context_1.stroke();
// 2-я кривая
const context_2 = canvas.getContext("2d");
context_2.moveTo(0,0);
const controlX_1_2 = 69;
const controlY_1_2 = 0;
const controlX_2_2 = 138;
const controlY_2_2 = 30;
const endPointX_1_2 = 207;
const endPointY_1_2 = 100;
context_2.bezierCurveTo(controlX_1_2, controlY_1_2, controlX_2_2, controlY_2_2, endPointX_1_2, endPointY_1_2);
context_2.moveTo(207,100);
const controlX_3_2 = 240;
const controlY_3_2 = 130;
const controlX_4_2 = 260;
const controlY_4_2 = 140;
const endPointX_2_2 = 300;
const endPointY_2_2 = 150;
context_2.bezierCurveTo(controlX_3_2, controlY_3_2, controlX_4_2, controlY_4_2, endPointX_2_2, endPointY_2_2);
context_2.moveTo(300,150);
const controlX_5_2 = 300;
const controlY_5_2 = 150;
const controlX_6_2 = 400;
const controlY_6_2 = 170;
const endPointX_3_2 = 414;
const endPointY_3_2 = 180;
context_2.bezierCurveTo(controlX_5_2, controlY_5_2, controlX_6_2, controlY_6_2, endPointX_3_2, endPointY_3_2);
context_2.stroke();
}
