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">     zambiatek </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();
