Untitled

<!doctype html>
<html>
	<head>
		<title> Tiny Palms </title>
		<link rel="stylesheet" type="text/stylesheet" href="style.css">
		<style>
			#content{
			width : 500px;
			margin : 0 auto;
		}
		</style>
	</head>
	<body>
		<div id="content">
			<canvas id="myCanvas"></canvas>
		</div>
		<script>

			var canvas = document.getElementById('myCanvas');
			var context = canvas.getContext('2d');

			canvas.width = 500;
			canvas.height = 500;

			function Point(x,y){
				this.x = x || 0;
				this.y = y || 0;
			}

			context.fillStyle = '#0a8';
			context.fillRect(0,0,canvas.width,canvas.height);

			function drawEyes(eyePosX,eyePosY,height,width){
				context.fillStyle = '#000';
				context.strokeStyle = '#000';
				context.beginPath();
				context.moveTo(eyePosX,eyePosY);
				context.bezierCurveTo(eyePosX,eyePosY-height,eyePosX+width,eyePosY-height,eyePosX+width,eyePosY)
				context.moveTo(eyePosX,eyePosY);
				context.bezierCurveTo(eyePosX,eyePosY+height,eyePosX+width,eyePosY+height,eyePosX+width,eyePosY);
				context.stroke();
				context.fill();
			}

			function drawLips(midpoint, width, upperHeight, lowerHeight){
				var point1 = new Point(midpoint.x-width,midpoint.y);
				var point2 = new Point(midpoint.x+width,midpoint.y);

				context.fillStyle = '#a44'

				context.beginPath();
				context.moveTo(point1.x,point1.y);
				context.bezierCurveTo(point1.x,point1.y-upperHeight,point2.x,point2.y-upperHeight,point2.x,point2.y);

				context.moveTo(point1.x,point1.y);
				context.bezierCurveTo(point1.x,point1.y+lowerHeight,point2.x,point2.y+lowerHeight,point2.x,point2.y);

				//context.stroke();
				context.fill();
			}

			function drawFace(point1, point2, h, eyeHeight){
				//drawGuideLines
				var width = point2.x-point1.x;
				var increment = h/3;
				var widthIncrement = width/3;

				//compute Face Handles
				var P = [];
				P[0] = new Point(point1.x-30*Math.random(), point1.y-30*Math.random());
				P[1] = new Point(point1.x-30*Math.random(), point1.y-30*Math.random());
				P[2] = new Point(point2.x+30*Math.random(), point2.y-30*Math.random());
				P[3] = new Point(point2.x+30*Math.random(), point2.y-30*Math.random());

				P[4] = new Point(point2.x+30*Math.random(), point2.y+h+30*Math.random());
				P[5] = new Point(point2.x+30*Math.random(), point2.y+h+30*Math.random());
				P[6] = new Point(point1.x+30*Math.random(), point1.y+h+30*Math.random());
				P[7] = new Point(point1.x+30*Math.random(), point1.y+h+30*Math.random());


				//Really Draw FaceLines
				context.beginPath();
				context.strokeStyle='#000';
				context.moveTo(point1.x,point1.y)
				context.bezierCurveTo(P[1].x,P[1].y,P[2].x,P[2].y,point2.x,point2.y);

				context.moveTo(point2.x,point2.y);
				context.bezierCurveTo(P[3].x,P[3].y,P[4].x,P[4].y,point2.x,point2.y+h);

				context.moveTo(point2.x, point2.y+h);
				context.bezierCurveTo(P[5].x,P[5].y,P[6].x,P[6].y,point1.x,point1.y+h);

				context.moveTo(point1.x,point1.y+h);
				context.bezierCurveTo(P[7].x,P[7].y,P[0].x,P[0].y,point1.x,point1.y);
				context.stroke();

				drawEyes(point1.x+widthIncrement,point1.y+increment,eyeHeight,20);
				drawEyes(point2.x-widthIncrement,point2.y+increment,eyeHeight,20);

				var lipPoint = new Point(point1.x+9*width/16, point1.y+4*h/5);

				drawLips(lipPoint,10+30*Math.random(),15*Math.random(),15*Math.random());
			}

			var point1 = new Point(150,100);
			var point2 = new Point(350,100);
			var eyeHeight = 20;
			var temp = 20;

			drawFace(point1, point2, 200, eyeHeight);

			document.addEventListener('click',function(){
				var interval = setInterval(function(){
					context.fillStyle = '#0a8';
					context.fillRect(0,0,canvas.width,canvas.height);
					drawFace(point1, point2, 200, temp);

					if(temp<1){
						temp=20;
						drawFace(point1, point2, 200, temp);
						clearInterval(interval);
					}else{
						temp-=5;
					}
				},33);
			});

		</script>
	</body>
</html>