I would like to draw a line between two dynamic points on a webpage using HTML

Question

I'm working within the confines of ASP.NET and HTML.

I have a gridview on the left and a gridview on the right.

When the user selects a checkbox in the left gridview and a checkbox in the right gridview, I would like a line to be rendered that connects the checkboxes.

Is there an efficient way to do this? Anything approaching this?

DrawLine(LeftCheckBox.Location, RightCheckbox.Location, Red, 1px)

The only thing I can think of that would be work, but be a poor solution, is positioning and stretching an Image vertically based upon where the selected checkboxes are.

Answer 1

You could try using jQuery drawing library.

Also you might find this other thread very useful.

Answer 2

You may use Walter Zorn's javascript graphics library. Unfortunately, his site is not maintained anymore. The last version with documentation and example can be found here: http://www.c-point.com/javascript_vector_draw.htm

Drawing a line is as easy as:

jg.drawLine(0, 0, 100, 200);

This probably is a little outdated because we have the canvas element now, but still works fine cross-browser.