A Sierpinski Gasket

<html>
<head>
    <script type="text/javascript" src="Canvas1.js"></script>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

</head>

<body>
     <h1>A Serpinski Gasket</h1>

<script>
    var WIDTH = 500;
    var HEIGHT = 500;
    var canvas = new Canvas(WIDTH, HEIGHT);
    canvas.Redisplay();
</script>

<p>
<button type="button" onclick=" canvas.Redisplay()">Redraw</button>
<p>
<select id="Color" onchange="canvas.SetColor(this.value); canvas.Redisplay()">
    <option value="red">red</option>
    <option value="blue">blue</option>
    <option value="green">green</option>
    <option value="black">black</option>
    <option value="white">white</option>
</select>

<p>


function Canvas(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);
        }
    }

    document.body.appendChild(canvas);

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

    this.count = 2000;

    this.Init();
    this.Reset();

    return this;
}

Canvas.prototype = {

    Init: function() {
        this.clearColor = "white";
	this.start = 0;
	this.color = "red";
    },

    Reset: function() {
        switch (this.start) {
	   default:
	   case 0:
               var p1 = [this.width/2.0, 20];
               var p2 = [20, this.height-20];
               var p3 = [this.width-20, this.height-20];
	       this.tri = [p1, p2, p3]
	       break;
	}
    },

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

        return;
    },

    Interp: function(a,b,s) {
        return a*s + b*(1-s);
    },

    RandPoint: function(p1, p2) {
        var s = Math.random();
	var x = this.Interp(p1[0],p2[0],s);
	var y = this.Interp(p1[1],p2[1],s);
	return [x,y];
    },

    HalfPoint: function(p1,p2) {
	var x = this.Interp(p1[0],p2[0],.5);
	var y = this.Interp(p1[1],p2[1],.5);
	return [x,y];
    },

    SetColor: function(color) {
        this.color = color;
    },

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

        var p, q, v;

        this.ctx.fillStyle = this.color;

        var t1 = this.RandPoint(this.tri[0], this.tri[1]);
	p = this.RandPoint(t1, this.tri[2]);
        for (var i=0; i<this.count; i++) {
	    var c = Math.floor(Math.random()*3);
	    v = this.tri[c]
	    q = this.HalfPoint(p,v);
	    this.ctx.fillRect(q[0],q[1],2,2);
	    p = q;
	}
        return;
    }
};