How to Draw Smooth Curve Through Multiple Points using JavaScript ?

In this article, we will Draw a Smooth Curve Through Multiple Points using JavaScript.

Approach: Drawing a smooth curve with multiple points is a challenging task. There are many algorithms that can help us to draw a curve using particular points. Bezier Curve is one of the curve drawing techniques. There is always lots of discussion around how to draw a smooth curve through multiple numbers of points using JavaScript. So, we are given to draw a smooth curve through the multiple numbers of points. For drawing a line we should have a slope of the line. So here we calculate the slope of a line by taking multiple inputs of x and y. For drawing a smooth curve we should have multiple numbers of inputs/points by which we can draw the smooth curve. Here we are trying to get a random number for which we are trying to draw a smooth curve. Here, we give you some ideas about drawing a smooth curve using multiple numbers of points. Please go through this code and we will explain it further. 

Example: This example shows the use of the above-explained approach.

html

<h1 style="color:green">
    GeeksforGeeks
</h1>

<canvas id="GFG" width="600" height="400"
        style="border: 2px solid black">
</canvas>

<script>
    var cv = document.getElementById("GFG");
    var ctx = cv.getContext("2d");

    function gradient(a, b) {
        return (b.y-a.y)/(b.x-a.x);
    }

    function bzCurve(points, f, t) {
        if (typeof(f) == 'undefined') f = 0.3;
        if (typeof(t) == 'undefined') t = 0.6;

        ctx.beginPath();
        ctx.moveTo(points[0].x, points[0].y);

        var m = 0;
        var dx1 = 0;
        var dy1 = 0;

        var preP = points[0];

        for (var i = 1; i < points.length; i++) {
            var curP = points[i];
            nexP = points[i + 1];
            if (nexP) {
                m = gradient(preP, nexP);
                dx2 = (nexP.x - curP.x) * -f;
                dy2 = dx2 * m * t;
            } else {
                dx2 = 0;
                dy2 = 0;
            }

            ctx.bezierCurveTo(
                preP.x - dx1, preP.y - dy1,
                curP.x + dx2, curP.y + dy2,
                curP.x, curP.y
            );

            dx1 = dx2;
            dy1 = dy2;
            preP = curP;
        }
        ctx.stroke();
    }

    // Generate random data
    var lines = [];
    var X = 10;
    var t = 40; // control the width of X.
    for (var i = 0; i < 100; i++ ) {
        Y = Math.floor((Math.random() * 300) + 50);
        p = { x: X, y: Y };
        lines.push(p);
        X = X + t;
    }

    // Draw smooth line
    ctx.setLineDash([0]);
    ctx.lineWidth = 2;
    ctx.strokeStyle = "green";
    bzCurve(lines, 0.3, 1);
</script>

Output:

Explanation: When we run this program, Every time it takes random inputs and this is why it generates a new smooth curve on every execution.

• Pre-requisite: HTML Canvas Basics
• Reference for canvas object is stored in variable ‘cv’ using DOM concept.
• Without having the drawing context of the canvas nothing can be drawn on it.

 var cv = document.getElementById("GFG");
        var ctx = cv.getContext("2d");

• Gradient function that returns the slope of the line.

function gradient(a, b) {
            return (b.y-a.y)/(b.x-a.x);
        }

• The beginPath method is used to start or reset the path.
• The MoveTo method is used to move the path to the specified point in the canvas.

  ctx.beginPath();
        ctx.moveTo(points[0].x, points[0].y);

• Stroke is used to draw the path you have defined with all those methods.

ctx.stroke();