Javascript required
Skip to content Skip to sidebar Skip to footer
Home / Draw the Smooth Line Through the Points

Draw the Smooth Line Through the Points

How to Draw Smooth Curve Through Multiple Points using JavaScript ?

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.

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();

Draw the Smooth Line Through the Points

Source: https://www.geeksforgeeks.org/how-to-draw-smooth-curve-through-multiple-points-using-javascript/