Lo script Javascript non funziona

Testato su Firefox e Chrome. Script trovato su SO in un vecchio Q / A. Lo script ha affermato di funzionare, non funziona per me. Preferirei utilizzare il puro JS per risolvere questo problema anziché la canvas HTML5 per supportare i browser più vecchi.

jsfiddle: http://jsfiddle.net/qnkonmgo/

   window.onload = function() { DrawLine(1,1,100,100); } function DrawLine(x1, y1, x2, y2){ if(y1 < y2){ var pom = y1; y1 = y2; y2 = pom; pom = x1; x1 = x2; x2 = pom; } var a = Math.abs(x1-x2); var b = Math.abs(y1-y2); var c; var sx = (x1+x2)/2 ; var sy = (y1+y2)/2 ; var width = Math.sqrt(a*a + b*b ) ; var x = sx - width/2; var y = sy; a = width / 2; c = Math.abs(sx-x); b = Math.sqrt(Math.abs(x1-x)*Math.abs(x1-x)+Math.abs(y1-y)*Math.abs(y1-y) ); var cosb = (b*b - a*a - c*c) / (2*a*c); var rad = Math.acos(cosb); var deg = (rad*180)/Math.PI htmlns = "http://www.w3.org/1999/xhtml"; div = document.createElementNS(htmlns, "div"); div.setAttribute('style','border:1px solid black;width:'+width+'px;height:0px;-moz-transform:rotate('+deg+'deg);-webkit-transform:rotate('+deg+'deg);position:absolute;top:'+y+'px;left:'+x+'px;'); }      

Questo funziona. Guarda il violino qui: http://jsfiddle.net/jvs9hLwf/1/

 (function DrawLine(elementId, x1, y1, x2, y2) { if (y1 < y2) { var pom = y1; y1 = y2; y2 = pom; pom = x1; x1 = x2; x2 = pom; } var a = Math.abs(x1 - x2); var b = Math.abs(y1 - y2); var c; var sx = (x1 + x2) / 2; var sy = (y1 + y2) / 2; var width = Math.sqrt(a * a + b * b); var x = sx - width / 2; var y = sy; a = width / 2; c = Math.abs(sx - x); b = Math.sqrt(Math.abs(x1 - x) * Math.abs(x1 - x) + Math.abs(y1 - y) * Math.abs(y1 - y)); var cosb = (b * b - a * a - c * c) / (2 * a * c); var rad = Math.acos(cosb); var deg = (rad * 180) / Math.PI div = document.getElementById(elementId); div.setAttribute('style', 'border:1px solid black;width:' + width + 'px;height:0px;-moz-transform:rotate(' + deg + 'deg);-webkit-transform:rotate(' + deg + 'deg);position:absolute;top:' + y + 'px;left:' + x + 'px;'); })("div", 1, 1, 100, 100); 

Per prima cosa, invece di metterlo in un evento window.onload, invoco immediatamente la funzione con i parametri desiderati, ma mantengo il nome della funzione in modo che possa essere riutilizzata.

Secondo: ho aggiunto un parametro in modo da poter specificare l'ID dell'elemento a cui stai cercando di tracciare la linea quando chiami la funzione.