maisaengineering/Canvas Test

## Canvas Test
<!DOCTYPE HTML>
<html lang="en"><head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Beach Ball - HTML 5 Canvas</title>
	<style type="text/css" media="screen">
		body { background:#eee; margin:2em; text-align:center; }
		canvas { display:block; margin:2em auto; border:1px solid #ccc; background:#fff }
	</style>
</head><body>
<canvas></canvas>
<script type="text/javascript" charset="utf-8">
	var ball = new Image, shadow = new Image, shading = new Image;
	window.onload = function(){
		var c = document.getElementsByTagName('canvas')[0];
		var w = c.width = 800;
		var h = c.height = 600;
		var ctx = c.getContext('2d');
		var dx = 5, dy = -2;
		var x  = 400, y = 100, a = 0;
		var deg2rad = Math.PI / 180;
		var da = 10 * deg2rad;

		var bw = ball.width/2;
		var bh = ball.height/2;

		setInterval(function(){
			ctx.clearRect( 0, 0, w, h );

			ctx.translate(x,y);
			ctx.drawImage( shadow, -bw+10, -bh+10 );
			ctx.rotate(a);
			ctx.drawImage( ball, -bw, -bh );
			ctx.rotate(-a);                      // The shading shouldn't be rotated
			ctx.drawImage( shading, -bw, -bh );
			ctx.translate(-x,-y);

			x += dx;
			a += da;
			y += dy;

			if ((x-bw < 0) || (x+bw > w)){
				dx *= -1;
				da *= -1;
			}

			if ((y-bh < 0) || (y+bh > h)){
				dy *= -1;
				da *= -1;
			}

		},30);
	}
	ball.src    = 'http://upload.wikimedia.org/wikipedia/commons/1/16/AsterNovi-belgii-flower-1mb.jpg';
	shadow.src  = 'http://upload.wikimedia.org/wikipedia/commons/1/16/AsterNovi-belgii-flower-1mb.jpg';
	shading.src = 'http://upload.wikimedia.org/wikipedia/commons/1/16/AsterNovi-belgii-flower-1mb.jpg';
</script>
</body></html>
	<!DOCTYPE HTML>
	<html lang="en"><head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>Beach Ball - HTML 5 Canvas</title>
	<style type="text/css" media="screen">
	body { background:#eee; margin:2em; text-align:center; }
	canvas { display:block; margin:2em auto; border:1px solid #ccc; background:#fff }
	</style>
	</head><body>
	<canvas></canvas>
	<script type="text/javascript" charset="utf-8">
	var ball = new Image, shadow = new Image, shading = new Image;
	window.onload = function(){
	var c = document.getElementsByTagName('canvas')[0];
	var w = c.width = 800;
	var h = c.height = 600;
	var ctx = c.getContext('2d');
	var dx = 5, dy = -2;
	var x = 400, y = 100, a = 0;
	var deg2rad = Math.PI / 180;
	var da = 10 * deg2rad;

	var bw = ball.width/2;
	var bh = ball.height/2;

	setInterval(function(){
	ctx.clearRect( 0, 0, w, h );

	ctx.translate(x,y);
	ctx.drawImage( shadow, -bw+10, -bh+10 );
	ctx.rotate(a);
	ctx.drawImage( ball, -bw, -bh );
	ctx.rotate(-a); // The shading shouldn't be rotated
	ctx.drawImage( shading, -bw, -bh );
	ctx.translate(-x,-y);

	x += dx;
	a += da;
	y += dy;

	if ((x-bw < 0) \|\| (x+bw > w)){
	dx *= -1;
	da *= -1;
	}

	if ((y-bh < 0) \|\| (y+bh > h)){
	dy *= -1;
	da *= -1;
	}

	},30);
	}
	ball.src = 'http://upload.wikimedia.org/wikipedia/commons/1/16/AsterNovi-belgii-flower-1mb.jpg';
	shadow.src = 'http://upload.wikimedia.org/wikipedia/commons/1/16/AsterNovi-belgii-flower-1mb.jpg';
	shading.src = 'http://upload.wikimedia.org/wikipedia/commons/1/16/AsterNovi-belgii-flower-1mb.jpg';
	</script>
	</body></html>