How to draw a broken line in the canvas?


Tell me, please, how to draw a broken line from point A to point B through the canvas?
Something like this:
I.e. bending after each random number of pixels with alternating side (plus/minus) and a random deviation.
Tried to do a few lines, each time moving the coordinates and adding a random number, but it turns out a broom :(
In math I do not know if it is possible - explain, please, on fingers, or better as an example.
Thank you ♥

March 23rd 20 at 19:32
3 answers
March 23rd 20 at 19:34
Here I wrote a demo for example.
Well, the basic functions
/// (start x, start y,end x,end y, the minimum line length,max lines long, minimum deflection angle, max angle deviation) will return an array of points
generateLines function(xStart,yStart,xEnd,yEnd, lenRandMin,lenRandMax,angleDeviationMin, angleDeviationMax ){
 var arrayPos = [[xStart,yStart]];
 var xCur = xStart;
 var yCur = yStart;
 angleDeviationMin = (angleDeviationMin * Math.PI)/180;//in radians
 angleDeviationMax = (angleDeviationMax * Math.PI)/180;//in radians

 var deviationPos = false;
 if(getDist(xCur,yCur,xEnd,yEnd) <= lenRandMax){
 xCur = xEnd;
 yCur = yEnd;
 var len = rand(lenRandMin,lenRandMax);
 var angle = getAngle(xCur,yCur,xEnd,yEnd) + (deviationPos?rand(angleDeviationMin,angleDeviationMax):-rand(angleDeviationMin,angleDeviationMax));
 xCur += Math.cos(angle) * len;
 yCur += Math.sin(angle) * len;
 deviationPos = !deviationPos;
 }while(!(xCur == xEnd && yCur == yEnd));
 return arrayPos;
//Get angle between two points
function getAngle(dx,dy,dx1,dy1){
 return Math.atan2(dy - dy1,dx - dx1) + Math.PI;
///Get the distance between two points
 function getDist(x,y,x1,y1){
 return Math.sqrt(Math.pow(x1 - x,2)+Math.pow(y1-y,2));
//Get random from min to max
function rand(min, max) {
 return min + Math.random() * (max - min)
What you need.
I'll try to digest it, thanks - henriett commented on March 23rd 20 at 19:37
March 23rd 20 at 19:36
pour broom, will try :)
In General, I was ashamed of the broom and I deleted :(
And when you try to restore it, suddenly came to the realization that coordinate, too, need to move.
In General, something like that as it turns out, but it's a hat of some sort.

Just randomly how to bind here the coordinates of the start and end points, as well as to prohibit to rise above and move only in the direction - I have no idea - henriett commented on March 23rd 20 at 19:39
@henriett, took his broom :D
then another of the houses look, but that link is preserved

the idea is to estimate the distance between the endpoint and the "current latest" point, which is already finished, and change the direction of the line is not quite random, but depending on the remaining distance.. but it's not exactly - Alberto.Lem commented on March 23rd 20 at 19:42
@Alberto.Lem, and the last line must end at the endpoint.
And how can we limit the possible deviations?
Well, that is, to set a kind of boundary around the normal straight line which can not get out?

I understand that's asking a lot, but I just will not work. Kind of like random. and like as not, complex - henriett commented on March 23rd 20 at 19:45
March 23rd 20 at 19:38
Crooked way, but still:
To go from two points to meet when the distance between the lines reaches a certain threshold, to close these lines. Demo

Find more questions by tags CanvasJavaScript