A Collection of Shapes on a HTML5 canvas

Shapes.js

/*
	A Collection of Shape Objects for use on a HTML5 Canvas.
	By James King.

	Requires ctx to be a globally instanciated canvas 2d context.
 */

function Rectangle(x,y,width,height,colour) {
	this.x = x || 0;
	this.y = y || 0;
	this.width = width || 10;
	this.height = height || 20;
	this.colour = colour || "red";

	this.draw = function(){
		ctx.fillStyle = this.colour;
		ctx.fillRect(this.x, this.y, this.width, this.height);
	};
}

function Circle(x,y,r,colour) {
	this.x = x || 0;
	this.y = y || 0;
	this.r = r || 10;
	this.colour = colour || "red";

	this.draw = function(){
		ctx.beginPath();
		ctx.arc(this.x, this.y, this.r, 0, 2*Math.PI);
		ctx.fillStyle = this.colour;
		ctx.fill();
	};
}

function Star (x,y,width,height,colour,points) {
	this.x = x || 0;
	this.y = y || 0;
	this.width = width || 10;
	this.height = height || 20;
	this.colour = colour || "red";
	this.points = points || 5;

	this.draw = function(){
		ctx.save();
		ctx.beginPath();
		ctx.translate(this.x, this.y);
		ctx.moveTo(0,0-(this.width/2));
		for(var i = 0; i < this.points; i++)
		{
			ctx.rotate(Math.PI / this.points);
	        ctx.lineTo(0, 0 - ((this.width/2)*2));
	        ctx.rotate(Math.PI / this.points);
	        ctx.lineTo(0, 0 - (this.width/2));
		}
		ctx.fillStyle = this.colour;
		ctx.fill();
		ctx.restore();
	};
}

function Text (text, x, y, alpha, font, colour) {
	this.text = text || "";
	this.x = x || 30;
	this.y = y || 30;
	this.font = font || null;
	this.red = colour[0] || 0;
	this.green = colour[1] || 0;
	this.blue = colour[2] || 0;
	this.alpha = alpha;
	this.animationDone = true;
	this.length = 0;
	this.words = [];

	this.splitIntoWords = function(){
		this.words = this.text.split(" ");
		this.text = this.words.join(" ");
	};

	this.wordWrap = function(){
		this.length = ctx.measureText(this.text);
		if((this.x + this.length) >= canvas.width)
		{

		}
	};

	this.draw = function(skipClear){
		if(!skipClear) canvas.width = canvas.width;
		this.splitIntoWords();
		ctx.font = this.font;
		ctx.fillStyle = "rgba("+this.red+", "+this.green+", "+this.blue+", " + this.alpha + ")";
		if(this.wordWrap())
		{
			alert("Word Wrap!");
		}
		else
		{
			ctx.fillText(this.text, this.x, this.y);
			this.length = ctx.measureText(this.text);
		}
	};

	this.undraw = function(){
		this = null;
	};

	this.fadeIn = function(time){
		this.animationDone = false;
		var that = this;
		var fadeIn = setInterval(function() {
            canvas.width = canvas.width; // Clears the canvas
            // TODO: May need a redraw of all objects?
        	that.draw();
            that.alpha += 0.05; // increase opacity (fade in)
            if (that.alpha >= 1) {
            	that.alpha = 1 // Reset to fix alpha > 1 bug
            	// TODO: May need a redraw of all objects?
            	that.draw();
                clearInterval(fadeIn);
                that.animationDone = true;
            }
        }, time);
	};

	this.fadeOut = function(time){
		this.animationDone = false;
		var that = this;
		var fadeOut = setInterval(function() {
            canvas.width = canvas.width; // Clears the canvas
            // TODO: May need a redraw of all objects?
            that.draw();
            that.alpha -= 0.05; // decrease opacity (fade out)
            if (that.alpha <= 0) {
            	that.alpha = 0;
            	// TODO: May need a redraw of all objects?
            	that.draw();
                clearInterval(fadeOut);
                that.animationDone = true;
            }
        }, time);
	};

	this.drawCount = function(count){
		var draft = this.text;
		this.text = this.text.substr(0, count);

		var wordWrap = this.wordWrap();
		if(wordWrap)
		{
			alert("Word would wrap!");
		}
		else
		{
			this.draw(true);
		}

		this.text = draft;
	};

	this.typeText = function(baseObjects, padding){
		var count = 1;
		var that = this;
		animateText = setInterval(function(){
			canvas.width = canvas.width;
			that.drawBaseObjects(baseObjects);
			typeText = that.drawCount(count);

			// Word Wrapping
			console.log("Canvas width: "+canvas.width);
			console.log("Text width: "+ctx.measureText(that.text).width);
			console.log("Text X: "+that.x);
			if((that.x + ctx.measureText(that.text).width) >= (canvas.width - padding))
			{
				console.log("Word Wrap!");
			}
			
			if(count == text.length)
			{
				window.clearInterval(animateText);
			}
			count++;
		}, 75);
	};

	this.drawBaseObjects = function(baseObjects){
		for(var i=0;i < baseObjects.length; i++)
		{
			baseObjects[i].draw();
		}
	};
}

// function Text (text, x, y, alpha, font, colour) {
// 	this.text = text || "";
// 	this.x = x || 30;
// 	this.y = y || 30;
// 	this.font = font || null;
// 	this.red = colour[0] || 0;
// 	this.green = colour[1] || 0;
// 	this.blue = colour[2] || 0;
// 	this.alpha = alpha;
// 	this.animationDone = true;
// 	this.length = 0;
// 	this.words = [];

// 	this.splitIntoWords = function(){
// 		this.words = this.text.split(" ");
// 	};

// 	this.draw = function(skipClear){
// 		if(!skipClear) canvas.width = canvas.width;
// 		ctx.font = this.font;
// 		ctx.fillStyle = "rgba("+this.red+", "+this.green+", "+this.blue+", " + this.alpha + ")";
//         ctx.fillText(this.text, this.x, this.y);
//         this.length = ctx.measureText(this.text);
// 	};

// 	this.undraw = function(){
// 		this = null;
// 	}

// 	this.fadeIn = function(time){
// 		this.animationDone = false;
// 		var that = this;
// 		var fadeIn = setInterval(function() {
//             canvas.width = canvas.width; // Clears the canvas
//             // TODO: May need a redraw of all objects?
//         	that.draw();
//             that.alpha += 0.05; // increase opacity (fade in)
//             if (that.alpha >= 1) {
//             	that.alpha = 1 // Reset to fix alpha > 1 bug
//             	// TODO: May need a redraw of all objects?
//             	that.draw();
//                 clearInterval(fadeIn);
//                 that.animationDone = true;
//             }
//         }, time);
// 	};

// 	this.fadeOut = function(time){
// 		this.animationDone = false;
// 		var that = this;
// 		var fadeOut = setInterval(function() {
//             canvas.width = canvas.width; // Clears the canvas
//             // TODO: May need a redraw of all objects?
//             that.draw();
//             that.alpha -= 0.05; // decrease opacity (fade out)
//             if (that.alpha <= 0) {
//             	that.alpha = 0;
//             	// TODO: May need a redraw of all objects?
//             	that.draw();
//                 clearInterval(fadeOut);
//                 that.animationDone = true;
//             }
//         }, time);
// 	};

// 	this.drawCount = function(count){
// 		var draft = this.text;
// 		this.text = this.text.substr(0, count);

// 		var wordWrap = this.wordWrap();
// 		if(wordWrap)
// 		{
// 			alert("Word would wrap!");
// 		}
// 		else
// 		{
// 			this.draw(true);
// 		}

// 		this.text = draft;
// 	};

// 	this.typeText = function(baseObjects, padding){
// 		var count = 1;
// 		var that = this;
// 		animateText = setInterval(function(){
// 			canvas.width = canvas.width;
// 			that.drawBaseObjects(baseObjects);
// 			typeText = that.drawCount(count);

// 			// Word Wrapping
// 			console.log("Canvas width: "+canvas.width);
// 			console.log("Text width: "+ctx.measureText(that.text).width);
// 			console.log("Text X: "+that.x);
// 			if((that.x + ctx.measureText(that.text).width) >= (canvas.width - padding))
// 			{
// 				console.log("Word Wrap!");
// 			}
			
// 			if(count == text.length)
// 			{
// 				window.clearInterval(animateText);
// 			}
// 			count++;
// 		}, 75);
// 	};

// 	this.drawBaseObjects = function(baseObjects){
// 		for(var i=0;i < baseObjects.length; i++)
// 		{
// 			baseObjects[i].draw();
// 		}
// 	};
// };