I'm working in JavaScript drawing on a canvas, and have four coordinates to draw a parallelogram, called A, B, C, and D starting from the top-left, top-right, bottom-left, and bottom right, respectively. An example of some coordinates might be: A: (3, 3) B: (4, 3) C: (1, 0) D: (2, 0) I can draw the parallelogram just fine, but I would like to fill it in with a gradient. I want the gradient to fill in from left to right, but matching the angle of the shape. The library I use (CAKE) requires a start and stop coordinate for the gradient. My stop and start would be somewhere half way between A and C, and end somewhere half way between B and D. Of course, it is not simply EXACTLY half way because the angles at A, B, C, and D are not right angles. So given this information (the coordinates), how to I find the point on the line A - C to start, and the point on the line B - D to stop? Remember, I'm doing this in JavaScript, so I have some good Math tools at my disposal for calculation.