jkasun/Canvas Line Curve

## Canvas Line Curve
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <canvas id='canvas' height="150" width="400" style="border: 1px solid"></canvas>

    <script>
        let width = 400;
        let height = 150;

        let ctx = document.getElementById('canvas').getContext('2d');

        let draw = function () {

            ctx.clearRect(0, 0, width, height);

            ctx.beginPath();
            ctx.fillStyle = '#000';

            ctx.moveTo(10, height - 10);

            let points = [{ x: 10, y: height - 10 }];

            for (var i = 1; i < 20; i++) {
                let x = 10 + i * 20;
                let y = height - (20 + Math.floor(Math.random() * 50));

                points.push({x, y});
            }

            // move to the first point
            ctx.moveTo(points[0].x, points[0].y);

            var xc;

            for (i = 1; i < points.length - 2; i++) {
                xc = (points[i].x + points[i + 1].x) / 2;
                var yc = (points[i].y + points[i + 1].y) / 2;
                ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
            }

            // curve through the last two points
            ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);

            ctx.lineTo(xc + 30, height - 10);

            ctx.stroke();
            ctx.fill();

            setTimeout(function () {
                ctx.restore();
                window.requestAnimationFrame(draw);
            }, 250);
        }

        window.requestAnimationFrame(draw);

    </script>
</body>

</html>
	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	</head>

	<body>
	<canvas id='canvas' height="150" width="400" style="border: 1px solid"></canvas>

	<script>
	let width = 400;
	let height = 150;

	let ctx = document.getElementById('canvas').getContext('2d');

	let draw = function () {

	ctx.clearRect(0, 0, width, height);

	ctx.beginPath();
	ctx.fillStyle = '#000';

	ctx.moveTo(10, height - 10);

	let points = [{ x: 10, y: height - 10 }];

	for (var i = 1; i < 20; i++) {
	let x = 10 + i * 20;
	let y = height - (20 + Math.floor(Math.random() * 50));

	points.push({x, y});
	}

	// move to the first point
	ctx.moveTo(points[0].x, points[0].y);

	var xc;

	for (i = 1; i < points.length - 2; i++) {
	xc = (points[i].x + points[i + 1].x) / 2;
	var yc = (points[i].y + points[i + 1].y) / 2;
	ctx.quadraticCurveTo(points[i].x, points[i].y, xc, yc);
	}

	// curve through the last two points
	ctx.quadraticCurveTo(points[i].x, points[i].y, points[i + 1].x, points[i + 1].y);

	ctx.lineTo(xc + 30, height - 10);

	ctx.stroke();
	ctx.fill();

	setTimeout(function () {
	ctx.restore();
	window.requestAnimationFrame(draw);
	}, 250);
	}

	window.requestAnimationFrame(draw);

	</script>
	</body>

	</html>