JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
    <script src="js.js" defer></script>
</head>
<body>

<canvas id="c1" width="400" height="200"></canvas>

</body>
</html>

CSS

#c1 {
	width: 400px;
	height: 200px;
	border: 3px solid black;
	margin: 40px;
	background-image:...

JavaScript

var canvas = document.getElementById('c1');
var ctx = canvas.getContext('2d');
var timer;

let oneLineX = [0,50,75,100,140,150,200,280,300,320,350];
let oneLineY = [100,90,100,110,100,90,100,100,90,100,100];

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function drawLine1(){
  ctx.beginPath();
  ctx.strokeStyle = "red";
  ctx.lineWidth = '4';
  for(var i=1; i<10;i++){ 
    ctx.moveTo(oneLineX[i-1],oneLineY[i-1]);
    ctx.lineTo(oneLineX[i],oneLineY[i]);
    ctx.lineCap = "round";
    ctx.stroke();
    ctx.closePath();
  	await sleep(500);
  };
  ctx.stroke();
  ctx.closePath();
}

drawLine1();