JavaScript - Draw

// initialize: "var draw=new draw(/* pass HTML element; optional */);"
// use:        "draw.circle(100,100,100,"#000000");"

/**
 * @param object c : container to hold drawn shapes (optional)
 * @note           : warning: can be memory intensive.
 */
function Draw(c) {
   var container;
   construct(c);
   /**
    * @constructor
    * @param object c : container to hold drawn shapes (optional)
    */
   function construct(c) {
      container=(typeof c=="undefined")?getDefaultContainer():c;
   }
   /**
    * @return object : a default container
    * @note          : get a default container in none is provided
    */
   function getDefaultContainer() {
      var temp=document.createElement("diV");
      document.body.appendChild(temp);
      return temp;
   }
   /**
    * @note : remove all children of container
    */
   Draw.prototype.clear=function() {
      container.innerHTML="";
      // better way of doing this, but much slower:
      /*
       * while(container.hasChildNodes()) {
       *    container.removeChild(container.firstChild);
       * }
       */
   }
   /**
    * @param object c : container to hold drawn shapes (optional)
    * @note           : set container
    */
   Draw.prototype.setContainer=function(c) {
      container=(typeof c=="undefined"?getDefaultContainer():c);
   }
   /**
    * @return object : the container of all drawn objects
    * @note          : get reference to container
    */
   Draw.prototype.getContainer=function() {
      return container;
   }
   /**
    * @param number x1 : start x coodinate of line
    * @param number y1 : start y coodinate of line
    * @param number x2 : end x coodinate of line
    * @param number y2 : end y coodinate of line
    * @param number t  : thickness of line; optional: 1
    * @param string c  : hexdecimal or rgb color of line; optional: #000000
    * @note            : draw a rectangle ("line")
    */
   Draw.prototype.line=function(x1,y1,x2,y2,t,c) {
      if (typeof t=="undefined") {t=1;}
      if (x1==x2) {x2+=t;} // add thickness
      if (y1==y2) {y2+=t;} // add thickness
      var div=document.createElement("div");
      div.style.position="absolute";
      div.style.width= Math.abs(x1-x2)+"px";
      div.style.height=Math.abs(y1-y2)+"px";
      div.style.left=x1+"px";
      div.style.top =y1+"px";
      div.style.backgroundColor=(typeof c=="undefined"?"#000000":c);
      div.style.cursor="pointer";
      container.appendChild(div);
   }
   /**
    * @param number x : left edge of rectangle
    * @param number y : top edge of rectangle
    * @param number w : width of rectangle
    * @param number h : height of rectangle
    * @param string c : hexdecimal or rgb color of rectangle; optional: #000000
    */
   Draw.prototype.rectangle=function(x,y,w,h,c) {
      Draw.prototype.line(x,y,x+w,y+h,1,c);
   }
   /**
    * @param number xc : horizontal center of elipse
    * @param number yc : vertical center of elipse
    * @param number xr : horizontal radius of elipse
    * @param number xr : vertical radius of elipse
    * @param number t  : hexdecimal or rgb color of elipse; optional: #000000
    * @note            : uses standard trig functions sin() and cos()
    *                  : an elipse can be thought of as an oval
    */
   Draw.prototype.elipse=function(xc,yc,xr,yr,t) {
      var oldX=new Array(); // holds previous x values
      var oldY=new Array(); // holds previous y values
      for (var i=0; i<360; i++) {
         var drawn=false;
         var x=xc+Math.cos(i)*xr;
         var y=yc+Math.sin(i)*yr;
         x=Math.floor(x);
         y=Math.floor(y);
         if (oldX.inArray(x)&&oldY.inArray(y)) {
            continue; // point (x,y) already drawn, don't redraw               
         }
         oldX[oldX.length]=x;
         oldY[oldY.length]=y;
         Draw.prototype.rectangle(x,y,1,1,t);
      }
   }
   /**
    * @see Draw#elipse : elipse where xr=yr
    */
   Draw.prototype.circle=function(xc,yc,r,t) {
      Draw.prototype.elipse(xc,yc,r,r,t);
   }
}