Plot Type: Parametric Y independent X independent

HTML code

        <div id="canvas1Space"></div>
        <p>
        <script>
            var canvas = new parametricCanvas(400,400, "canvas1Space");
            canvas.Redisplay();
        </script>
        <p>
        Plot Type:
        <select onchange="canvas.PlotType(this.value); canvas.Redisplay()">
            <option value="p">Parametric</option>
            <option value="y">Y independent</option>
            <option value="x">X independent</option>
        </select>

parametric.js

var PARAMETRIC = 0,
    Y_INDEPENDANT = 1,
    X_INDEPENDANT = 2;

var RED_END = 255,
    RED_START = 25,
    GREEN_END = 69,
    GREEN_START = 25,
    BLUE_END = 0,
    BLUE_START = 112;

function parametricCanvas(width, height, locID) {

    if (width == undefined || width < 0) {
       width = 300;
    }

    if (height == undefined || height < 0) {
       height = 300;
    }

    var canvas = document.createElement('canvas')
        canvas.height = height;
        canvas.width = width;

    if(locID == undefined) {
        document.body.appendChild(canvas);
    } else {
        div = document.getElementById(locID);
	if (null == div) {
            document.body.appendChild(canvas);
	} else {
	    div.appendChild(canvas);
	}
    }

    this.width = width;
    this.height = height;
    this.clearColor = "#ffffff";
    this.ctx =  canvas.getContext("2d");

    this.radius = Math.min(width, height)*0.45;
    this.center = {'x':Math.floor(width/2), 'y':Math.floor(height/2)};
    this.method = PARAMETRIC;
    this.percent = 0;

    return this;
}

parametricCanvas.prototype = {

    SetClearColor: function(color) {
        this.clearColor = color;
        return;
    },

    Clear: function() {
        this.ctx.fillStyle=this.clearColor;
        this.ctx.fillRect(0,0,this.width,this.height);

        return;
    },

    PlotType: function(choice) {
       switch (choice) {
          case 'p':
              this.method = PARAMETRIC;
	      break;
	  case 'y':
              this.method = Y_INDEPENDANT ;
	      break;
	  case 'x':
	  default:
              this.method = X_INDEPENDANT ;
	      break;

       }
       return;
    },

    Color: function() {
        var red, green, blue
	red = param(RED_START, RED_END, this.percent);
	green = param(GREEN_START, GREEN_END, this.percent);
	blue = param(BLUE_START, BLUE_END, this.percent);

	return 'rgb('+ red + ', '+ green + ',' + blue +')';

    },

    Plot: function(point) {
          this.ctx.fillStyle=this.Color();
          this.ctx.fillRect(point.x,point.y,2,2);
	  return;
    },

    Parametric: function() {
       var theta;
       var phi ;
       var point;

       for(theta = 0; theta < 360; theta++) {
          this.percent = theta/360;
          phi = theta * Math.PI/180.0;
          point = ParametricCircle(this.center, this.radius, phi); 
	  this.Plot(point);
       }

       return;
    },

    DrawByX: function() {
       var point = {};
       var y, x;
       var step = 0;

       for(x = this.center.x-this.radius; x <= this.center.x+this.radius; x++) {
          this.percent = step/(2*this.radius);
	  step++;
	 
          y = FofX(x, this.center.x, this.radius);

          point.x = x;
	  point.y = y + this.center.y;
	  this.Plot(point);

	  point.y = -y + this.center.y;
	  this.Plot(point);
       }
    },

    DrawByY: function() {
       var point = {};
       var y, x;
       var step = 0;

       for(y = this.center.y-this.radius; y <= this.center.y+this.radius; y++) {
          this.percent = step/(2*this.radius);
	  step++;

          x = FofY(y, this.center.y, this.radius);

          point.y = y;
	  point.x = x + this.center.x;
	  this.Plot(point);

	  point.x = -x + this.center.x;
	  this.Plot(point);
       }
    },

    Redisplay: function() {
	this.Clear();

        switch(this.method) {
	    case PARAMETRIC:
	        this.Parametric();
		break;
	    case Y_INDEPENDANT:
	        this.DrawByY();
		break;
	    case X_INDEPENDANT:
	    default:
	        this.DrawByX();

	}
        return;
    }
};

function param(start, end, t) {
    return Math.floor(start * (1-t) + end*t);
}

function FofX(x, xc,r) {
    y = Math.sqrt(r*r-(x-xc)*(x-xc))
    return y;
}

function FofY(y, yc,r) {
    x = Math.sqrt(r*r-(y-yc)*(y-yc))
    return x;
}

function ParametricCircle(center, r, theta) {
    point = {};
    point.x = Math.floor(r * Math.cos(theta)) + center.x;
    point.y = Math.floor(r * Math.sin(theta)) + center.y;

    return point;
}