Helper function for drawing lines on screen using div i e no CANVAS rasterization used for debugging verying on screen positions layouts testing const maxobjs 100 var numobjs2 0 var objs function cleardraw2 numobjs2 0 for let i 0 i objs length i objs i style left 1000px function setupdraw numobjs2 0 for let i 0 i maxobjs i let div document createElement div document body appendChild div objs push div setupdraw helper function for drawing lines using div elements use a bit of trigonometry to set the size and orientation to create a line function drawLine s0 s1 col blue let ax s0 x let ay s0 y let bx s1 x let by s1 y console log numobjs2 console assert numobjs2 maxobjs let div objs numobjs2 numobjs2 if div 0 div document createElement div document body appendChild div div style position absolute if ay by bx ax bx ax bx ax bx bx ax by ay by ay by ay by by ay let calc Math atan ax bx by ay calc calc 180 0 Math PI let length Math sqrt ax bx ax bx ay by ay by div style height length px div style width 2 px div style left ax px div style top ay px div style transform rotate calc deg div style transformOrigin 0 0 div style backgroundColor col blue div style z index 999 function drawCross v0 s 20 col green drawLine x v0 x s y v0 y x v0 x s y v0 y col drawLine x v0 x y v0 y s x v0 x y v0 y s col Tests Examples drawCross x 40 y 40 drawLine x 10 y 10 x 100 y 50 red console log ready
document body appendChild div div style position absolute if ay by bx ax bx ax bx ax bx bx ax by ay by ay by ay by by ay let calc Math atan ax bx by ay calc calc 180 0 Math PI let length Math sqrt ax bx ax bx ay by ay by div style height length px div style width 2 px div style left ax px div style top ay px div style transform rotate calc deg div style transformOrigin 0 0 div style backgroundColor col blue div style z index 999 function drawCross v0 s 20 col green drawLine x v0 x s y v0 y x v0 x s y v0 y col drawLine x v0 x y v0 y s x v0 x y v0 y s col Tests Examples drawCross x 40 y 40 drawLine x 10 y 10 x 100 y 50 red console log ready