JS drawing without canvas or framework

by Wycott

HTML

<h1>The flag of France</h1>
<div id="flag">    
</div>

CSS

#flag
{
    width: 150px;
    height: 100px;
    border:1px solid black;
 }

JavaScript

//CHANGE THIS VALUE TO SEE THE EFFECT

var calcAngle = true;

var flag = $('#flag');

var top = flag.position().top + 2;
var bottom = flag.position().top + flag.height();
var section = flag.width() / 3;

var LHS = 10;
var RHS = 108;

linedraw(LHS,top,LHS,bottom,section, '#0000FF', calcAngle);	// Blue portion
linedraw(RHS,top,RHS,bottom,section, '#FF0000', calcAngle);	// Red portion

function linedraw(ax,ay,bx,by, px, colour, deriveAngle)
{
    if(ay>by)
    {
        bx=ax+bx;  
        ax=bx-ax;
        bx=bx-ax;
        by=ay+by;  
        ay=by-ay;  
        by=by-ay;
    }
    var calc;
    
    if (deriveAngle == true)
    {
        calc = Math.atan((ay-by)/(bx-ax));
    	calc=calc*180/Math.PI;    
    }
    else
    {
        calc = 0;
    }
    
    var length=Math.sqrt((ax-bx)*(ax-bx)+(ay-by)*(ay-by));
    var code = "<div id='line' style='height:" + length + "px;width:" + px + "px;background-color:" + colour + ";position:absolute;top:" + (ay) + "px;left:" + (ax) + "px;transform:rotate(" + calc + "deg);-ms-transform:rotate(" + calc + "deg);transform-origin:0% 0%;-moz-transform:rotate(" + calc + "deg);-moz-transform-origin:0% 0%;-webkit-transform:rotate(" + calc  + "deg);-webkit-transform-origin:0% 0%;-o-transform:rotate(" + calc + "deg);-o-transform-origin:0% 0%;'></div>"
    $('#flag').append(code);
}