JSFiddle - React, Tailwind, and code Playground

HTML

<body>
	<canvas id="canvas" width="500" height="500">
		webgl couldn't be started
	</canvas>
</body>

JavaScript

canvasHolder = document.getElementById( 'canvas' );
context = canvasHolder.getContext('2d');

context.fillStyle = 'white';
var w = canvasHolder.width, h = canvasHolder.height;
context.fillRect( 0, 0, w, h);

//set the direction the line draws in
//1->ltr | -1->rtl
var dir = -1;
//IMPORTANT: this must be set to greater than the length
//of the line
var length = 608;
//the speed of the line draw
var speed = 2;

var progress = 0;
var lineInterval;

//Go!
context.globalCompositeOperation='copy';
drawLine();

function drawLine() {
    //this clears itself once the line is drawn
    lineInterval = setInterval(updateLine, 1);
}

function updateLine() {
    //define the line
    defineLine();

	if(progress<length)
	{
      progress+=speed;
      moveDash(progress, dir);
    } else {
      clearInterval(lineInterval);
    }
        
}

function defineLine() {
  context.beginPath();
	context.moveTo(100, 20);
	context.lineTo(200, 160);
	context.quadraticCurveTo(230, 200, 250, 120);
	context.bezierCurveTo(290, -40, 300, 200, 400, 150);
	context.lineTo(500, 90);
	context.lineWidth = 5;
    context.strokeStyle = 'green';
}

function moveDash(frac, dir) {
    //default direction right->left
    var dir = dir || -1 
   context.setLineDash([length]);
    context.lineDashOffset = dir*(frac+length);
	context.stroke();
}