Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to Draw Smooth Curve Through Multiple Points using JavaScript ?

  • Difficulty Level : Medium
  • Last Updated : 26 Mar, 2020

Drawing a smooth curve with the multiple points is a challenging task. There are many algorithms that can help us to draw a curve using particular points. Bezier Curve is the one of the curve drawing technique. There is always lots of discussion around how to draw a smooth curve through the 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 and for which we are trying to draw a smooth curve.

Hey geek! The constant emerging technologies in the world of web development always keeps the excitement for this subject through the roof. But before you tackle the big projects, we suggest you start by learning the basics. Kickstart your web development journey by learning JS concepts with our JavaScript Course. Now at it's lowest price ever!

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:




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Smooth Curve
    </title>
      
    <style
        #GFG { 
            border: 2px solid black; 
        
        h1{ 
            color: green; 
        
    </style
</head>
  
<body>
    <center>
        <h1>GeeksforGeeks</h1
      
        <canvas id="GFG"
            width="600" height="400">
        </canvas>
    </center>
      
    <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> 
</body>
  
</html>

Output:

Explanation: When we run this program, Every time it takes random inputs and this is why it generate 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 drawing context of canvas nothing can be drawn on it.
     var cv = document.getElementById("GFG");
            var ctx = cv.getContext("2d");
    
  • Gradient function that return slope of the line.
    function gradient(a, b) {
                return (b.y-a.y)/(b.x-a.x);
            }
  • BeginPath method are used to start or reset the path.
  • MoveTo method are 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();



My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!