Approaches to dynamically drawing lines (and other objects) in the browser window.

 

general approach (partially) working example comments
1. Use a collection of pre-built images (each a GIF or PNG image with transparency) and stretch or adjoin images as needed. linesframe.html Stretching image files causes grainy looking lines at some sizes. No reason to fear browser incompatabilities (except for mouse coordinate handling)..
2. Build a table with colored cells <td bgcolor=black height=2 width=2></td> placed judiciously amidst otherwise white cells. tablelineframe.html

something similar for rectangles

 Laborious, both for the programmer and the browser. No reason to fear browser incompatabilities.Using <tr><td colspan=n-k-1 bgcolor=white></td><td bgcolor=black height=2 width=2></td><td colspan=k bgcolor=white></td> as k moves from 1 to n, will draw a diagonal line using only 3n table cells instead of n2 cells, thus reducing the draw time.
3. Use VML from Microsoft This uses insertAdjacentHTML();

This uses document.write();

 Requires automatic connection to <html xmlns:v="urn:schemas.microsoft.com:vml"> on activation of drawing routines. Causes some delay in initialization of script. Delay could be overcome by predrawing an invisible line to activate schema.
4. Use SVG from W3C (and Adobe) An SVG file

Its source

 Requires plugin for browser.(Provided with Adobe Illustrator). Uses W3C official standard, which many browsers don't yet support.
5. Build image files dynamically (and to specification) in PHP (or UNIX shell) Drawing lines with PHP  
(the PHP source code)		 Requires server-access and associates additional network and server-induced delays. No browser incompatabilities (except for mouse coordinate handling). The example uses frames to dynamically rewrite content of the page. This could be spooled in forms of increasing complexity or by creating a history file on the server, instead.