How to make a parallel lines in html canvas

Question

I have these conditions:

1. Point A, B and C are created.
2. Point A to Point B will create a line.
3. Parallel lines are created depending on the position of Point A, B and C (refer to the figure below).
4. If you move Point A, the lines will also move but Points B and C remain on their respective positions.
5. They can be moved at any position.

What I want is to create this:

Answer 1

Consider the figure 1 below (I'm sure you already know this basic 2D geometry but without this my answer would be incomplete):

Coordinates for points A and B are known and we want to find function that can be used to calculate y-coordinate whenever x-coordinate is known, in such a way that point (x,y) lies on the line. From the figure 1:

k = tan(alpha) = (y2 - y1) / (x2 - x1) - the slope of line

Putting coordinates of either A or B into well known line equation y = kx + m we can calculate m to make the equation complete. Having this equation, for any coordinate x we can calculate coordinate y using this equation. The good thing about it is that it doesn't depend on the position of point A and B or slop (angle) of the line - you will have to take care of the special case of vertical/horizontal lines where y/x will be infinite according to this equation.

Back to your question. Take a look at figure 2 below:

We have very similar situation here, there is a line between points A and C, and line between points B and D. I assumed that point A is at the center of the coordinate system! This generally won't be the case but this is really not a restriction as you can perform translation that will put A in the center, then make your calculations and then translate everything back.

Using the technique described at the beginning, you can find the line equation for the line that connects A and C points and for the line that connects B and D points (D coordinates can be easily calculated). Let's assume you did just that:

A-C: y = k1*x (m is zero as line goes through the center A)

B-D: y = k2*x + m2 (m2 is not zero as line doesn't go through the center A)

Finally the algorithm you could use to draw these parallel lines:

1. Choose a space with which you want to take x-coordinates between x1 and x3. For example, if you want 4 lines this space will be s = (x3 - x1) / 4 and so on.
2. Set value x_start = x1 + s (and later x_start += s), and calculate y-coordinate using the equation for A-C line y_end = k1*x_start. This will give you point that lies on the line A-C and this is the start of your line.
3. Similarly, calculate the end point that will lie on the line that connects B and D:

x_end = x2 + s (later x_end += s)

y_end = k2*x_end + m2

4. Using these equations calculate points (x_start,y_start) and (x_end,y_end) for all lines that you want to draw (there is |x3 - x1| / desired_num_of_lines of them).

You'll have to form new equations each time point A moves out of the current A-C line, as every time this happens the slop of the A-C (and B-D) line changes invalidating the current equations.

I'm not going to write any JS code, but having the logic behind the possible solution should give you more then enough information to move forward with you own implementation.