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