Basic Canvas Toy Starting Point

by Admiral Potato

HTML

<canvas id="myCanvas" width="640" height="640"></canvas>

CSS

*{
	margin: 0;
	padding: 0;
}
html, body{
	height: 100%;
	background-color: #000;
}
canvas{
	display: block;
	position: absolute;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	border: 1px solid #333;
}

JavaScript

var canvas = document.getElementById('myCanvas'),
	width = canvas.width,
	halfWidth = width / 2,
	context = canvas.getContext('2d'),
	pi = Math.PI, tau = pi * 2, deg = pi / 180,
	sin = Math.sin, cos = Math.cos,
	addV = function(a, b, out){
		var output = out || a;
		output[0] = a[0] + b[0];
		output[1] = a[1] + b[1];
		return output;
	},
	angleVelToVec = function(angle, vel, out){
		var output = out || [];
		output[0] = cos(angle) * vel;
		output[1] = sin(angle) * vel;
		return output;
	},
	obList = [],
	startTime = new Date().getTime(),
	lastUpdate = 0,
	animate = function(){
		var now = new Date().getTime(),
			time = (now - startTime) / 1000,
			delta = time - lastUpdate,
			len = obList.length, i, item;
		//console.log(time);
		context.clearRect(0, 0, width, width);
		context.save();
		context.translate(halfWidth, halfWidth);
		for(i = 0; i < len; i++){
			item = obList[i];
			item.update(delta);
		}
		context.restore();
		lastUpdate = time;
		requestAnimationFrame(animate);
	},
	drawLine = function(aX, aY, bX, bY, color, width){
		var newColor = color || '#fff',
			newWidth = width || 2;
		if(context.strokeStyle !== newColor){
			context.strokeStyle = newColor;
		}
		if(context.lineWidth !== newWidth){
			context.lineWidth = newWidth;
		}
		context.beginPath();
		context.moveTo(aX, aY);
		context.lineTo(bX, bY);
		context.stroke();
	},
	drawLineV = function(a, b, color, width){
		drawLine(a[0], a[1], b[0], b[1], color, width);
	},
	drawCross = function(x, y, scale, color, width){
		var newScale = scale || 5;
		drawLine(x - newScale, y - newScale, x + newScale, y + newScale, color, width);
		drawLine(x + newScale, y - newScale, x - newScale, y + newScale, color, width);
	},
	drawCrossV = function(v, scale, color, width){
		drawCross(v[0], v[1], scale, color, width);
	};

var FunThing = function(args){
	var config = args || {},
		t = this,
		type = 'FunThing';
	if(t.type !== type){
		throw new Error(type + ' constructor must be invoked using `new`...